next.js: Back button scroll restoration not working on mobile
Bug report
Describe the bug
I’m navigating from a list-view to a profile, then clicking back. I expect the back button to return to the scroll position from the previous page.
However, on mobile browsers, going back does not restore scroll position. Instead, it triggers a full refresh and goes to the top of the page.
To Reproduce
- Open my website (that’s an immutable deploy URL).
- Click an artist profile.
- Go back (using the browser back button, or the one in the UI).
- Do this on both a mobile browser & desktop browser.
Notice that on a desktop browser, when you click back, it correctly returns you to your previous scroll position. On mobile browsers, however, it incorrectly sends you to the top of the page.
I also made a CodeSandbox.
- Scroll down
- Click an item
- Go back
Interestingly, in the CodeSandbox, the scroll doesn’t restore on either mobile or desktop. Not sure why. Is there special configuration needed for scroll restoration?
Expected behavior
When you click back on a mobile browser, it should return to the previous scroll position you were in.
The correct behavior can be seen on Vercel’s home page (video). When you go back, it puts you right where you left off.
Screenshots
✅ Desktop (works) video link here
- On desktop, the behavior is as expected. When you go back, whether by calling
router.back()
or by using the browserback
functionality, the page restores its scroll position
🚨 Mobile (doesn’t work) video link here
- When you go back, the home page does a full refresh, and the scroll position is never restored.
System information
- OS: iOS 14 (tested on iOS 13, same issue)
- Browser (if applies) iOS Chrome, iOS Safari
- Version of Next.js:
10.0.1
- Version of Node.js: 14.2.0
Additional context
For context, both my home page and my artist profile page are using getStaticProps
with revalidate: 1
. I’m not sure if that causes the home page to refresh. In either case, even if the previous page does refresh, I would expect the mobile browser to restore the scroll like the desktop browser does.
Also, I’m storing my data in SWR’s cache, in case that’s useful info.
I’ve tried some of the proposed solutions on https://github.com/vercel/next.js/issues/3303, but they led to some weird behavior where going back flashed a blank screen. https://github.com/vercel/next.js/issues/1309 is also relevant, but it was created 3 years ago, so I’m not sure what the current status of this is.
Thanks so much!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 5
- Comments: 16 (5 by maintainers)
Trying next 10.0.5 now and I got a weird behavior. When I press the back button on my details page it restores the scroll first (on the details page yet) and then navigates back to the list page
I’m still having this issue on 10.0.7 on chrome desktop
Hey @HectorLS , I did build a scroll manager as I didn’t have the best exp with the moxystudio one. Also, it’s a bit more optimized as I’m not listening to every scroll change or use external deps. I will make it public probably.