search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.72k stars 26.62k forks source link

Scroll is not restored after navigating with back button after swipe to top #53777

Open l-you opened 1 year ago

l-you commented 1 year ago

Verify canary release

Provide environment information

Current https://nextjs.org version is 13.4.17-canary.2

Which example does this report relate to?

https://nextjs.org

What browser are you using? (if relevant)

IOS Safari 16.6

Describe the Bug

When using the browser's provided back button following a quick upward swipe, the scroll position resets for the previous page. Please note that this issue only occurs in iOS Safari and cannot be replicated in IOS Chrome.

Expected Behavior

Scroll position should be restored.

To Reproduce

  1. Visit https://nextjs.org.
  2. Scroll down to a sufficiently distant link.
  3. Click on that link.
  4. The navigation bar has disappeared. To return, swipe up quickly and then click the back navigation. (Usually, the combination of those actions performed quickly)
  5. The scroll position is not restored.

Please look at the following video.

https://github.com/vercel/next.js/assets/32598874/9c245a29-d8c8-4aff-a434-dc021ec6d2c1

Update: Seems like a general bug for every website for both manual and auto scroll restoration only on IOS Safari. Here is screen recording of reproduction on google.com website.

https://github.com/vercel/next.js/assets/32598874/f017e150-b7d1-4d36-a88c-2955e5bad265

yoonjaepark commented 10 months ago

I have the same problem. In the local environment, scroll restore is enabled. If you build it and go up to the development environment, the scroll is only IOS. Ios Chrome also scrolls back up to the top. Next13.5.6 is in use. First, I am implementing it by switching only to history.scrollRestoration.

l-you commented 10 months ago

I have the same problem. In the local environment, scroll restore is enabled. If you build it and go up to the development environment, the scroll is only IOS. Ios Chrome also scrolls back up to the top. Next13.5.6 is in use. First, I am implementing it by switching only to history.scrollRestoration.

I was forced to make my implementation of scroll restoration. I've made it as a library. Feel free to take a look. But in newer versions of NextJs sometimes it works incorrectly. I would be glad if someone suggested a better solution.