Shared Element Transitions not working properly in nested layouts in App Router.

[paperpluto]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/eloquent-kirch-m4cgrw?file=%2Fapp%2F%28main%29%2Fwritings%2Fpage.tsx%3A1%2C1-31%2C1

To Reproduce

open the codesandbox, and interact with the preview. Click on links and visit different pages. You will see the shared element animations are not working properly. From "Home" to any is working but when going from "x"(other than home) to "y", the layout animations are not working properly.

Current vs. Expected behavior

"Current" => The elements in does not animate properly if there is no layout.tsx file present or even if present.

"Expected" => The elements should animate without any glitching.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

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

next dev (local)

Additional context

No response

[paperpluto]

Is there something that I'm missing or doing wrong?

[paperpluto]

I noticed something that the Shared Element transition only occurs nicely if there is some changes in each shared element's (position). If the shared element's layout stays the same across the pages, this bug occurs. @leerob Is there something wrong with this? or is it problem in "RootLayout" - layout.tsx.