Layout shift issue when navigating when i have scrolled down the previous page

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 18309
  Available CPU cores: 4
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.14 // There is a newer version (14.2.15) available, upgrade recommended!
  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
 ⚠ There is a newer version (14.2.15) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which example does this report relate to?

with-tailwindcss

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Let's say i scrolled down a page, and navigated to another without scrolling back up to the beginning, the application's layout gets pulled up a little, covering the topbar. I'm not sure if this is the reason but it seems that it aligns the top of the scrollbar to the top of the browser window for some reason.

This has happend in 2 of my applications so far.

Here is a video example:

https://github.com/user-attachments/assets/ada94bdc-0280-43c8-b954-64633bd296d0

Expected Behavior

I expect when i navigate that layout doesn't get pulled up.

To Reproduce

To reproduce you can use a copy of my layout.jsx file.

export default function Layout({ children }) {

    return (
        <div className="flex h-dvh ">
            {/* Sidebar | Left */}
            <Sidebar />
            {/* Main content | Right */}
            <div className="flex-1 w-full h-full">
                {/* Top Bar */}
                <Topbar  />
                <main className={`p-4 md:p-5 lg:p-8 overflow-y-auto h-[calc(100%-72px)]`}>
                    {children}
                </main>
            </div>
        </div>
    )
}

For the sidebar you can basically use a div that is 100dvh in height or h-full to fill up the space and then a width of maybe 270px or your desire. Then add 2 links in there.

Then make sure that the 2 pages your navigating between are scrollable, so basically make sure it overflows to allow scrolling within the <main> tag. If you navigate to one that's not scrollable then bug will not be reproduced.

vercel / next.js