next.js: [MAJOR BUG] Next/link forces scroll to top of {children} of layout
Link to the code that reproduces this issue
https://github.com/tshmieldev/next-scroll-bug
To Reproduce
Issue reproduced on Chrome
- Start app (npm run dev)
- Click links
Current vs. Expected behavior
Current: The link brings you to a page, and scrolls to beginning of {children}, not to top of page. Expected: Always brings you to top of opened page.
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: Windows
Arch: x86
Version: Windows 10 latest
Binaries:
Node: 21.4.0
npm: 10.1.0
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14
eslint-config-next: 14.0.4
react: 18
react-dom: 18
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Additional context
This happens if the {children} elements are not visible from the top of the page. If they are (even one pixel of them), the bug doesn’t occur. That’s why I added margin-bottom to the links, to make the children not visible and trigger the bug.
About this issue
- Original URL
- State: closed
- Created 7 months ago
- Reactions: 12
- Comments: 16 (9 by maintainers)
@resthedev We are—will be discussing this with the team!
@tshmieldev Noted.
We could possibly look to provide an option to opt of the
{children}behavior, but in the meantime, I recommend reducing your header size (if possible) or moving that into to your Pages.Please do consider this. I do think the unexpected default behavior is not desired by everyone. Would be good to have the option to opt in or out. Thank you!
@samcx I have a big header component, which doesn’t change for pages, so I have it as part of my layout, same with my footer, and on phones specifically it takes over 100vh
@samcx I will retest it shortly with your advice and let you know, I remember having issues with the scroll attribute, will let you know if I find it working or broken
It is most likely also related to https://github.com/vercel/next.js/issues/47475 This seems to be a very serious issue as it happens with a very basic example which might be used for a very common use case.
It seems to be related to #42492.