ViewTransition not working in rtl app

[Ammar-1999]

Link to the code that reproduces this issue

https://github.com/vercel/next-view-transition-example

To Reproduce

1. Clone next-view-transition-example.
2. Change the html dir to rtl
   Or you can just test it directly in here and change the dir of the page then test it

Current vs. Expected behavior

Recording.22.mp4

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 7988
  Available CPU cores: 8
Binaries:
  Node: 24.12.0
  npm: 11.1.0
  Yarn: 1.22.22
  pnpm: 10.8.1
Relevant Packages:
  next: 16.1.1 // Latest available version is detected (16.1.1).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response

[unclebay143]

Took some time checking this, it seems the ViewTransition fails in RTL layouts because Next.js dev tools create Shadow DOM elements that force left-to-right direction, breaking the browser's view transition calculations which require consistent text direction across the entire viewport.

The dev overlay's hardcoded direction: ltr in Shadow DOM prevents proper RTL inheritance, causing ViewTransition to show white screens instead of smooth animations when navigating in right-to-left document layouts.

Even when changing it to rtl it still remains as as ltr for the host styles