-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scroll restoration no longer works on popState when using shouldUpdateScroll browser API to orchestrate page transitions #27349
Comments
Thank you for opening this @blimpmason And big kudos for the excellent reproduction! ❤️ I've bisected it and seems that it was introduced in The only suspicious PR is this one: #21626 and it is marked as a breaking change (but for the plugin not for gatsby). So this interesting. I didn't have a chance yet to see what we can do here, so if someone is ready to tackle this - we are happy to accept a PR with a fix! |
Hello, I think it's because key format change in SessionStorage. The compared one is The current one is In |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Not stale! |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Not stale! |
Thank you for opening this, @blimpmason This should be fixed in #27384 and will be published in the next couple of days in |
Thanks @vrabe and @vladar! I just updated to [email protected] to test the fix and it looks like the scroll coordinates are now coming back as an array as expected so scroll position can be used once again without modifying the gatsby-browser shouldUpdateScroll function. Unfortunately I'm still experiencing an issue in which the page scrolls to the restored position before the setTimeout has completed — it seems the router is ignoring the shouldUpdateScroll logic. Example here: https://fix-test--gatsby-scroll-restoration-issue.netlify.app/. You can see the issue when you scroll to the bottom of page 1, click the link to page 2 and then hit the browser back button. I will open a new issue to address this issue. |
Description
At some point in the last six months or so the shouldUpdateScroll browser API hook and related functionality seems to have been changed under the hood and introduced breaking changes to scroll restoration for Gatsby sites that use a simple animated page transition implementation (as introduced by @ryanwiemer: https://github.com/ryanwiemer/gatsby-using-page-transitions).
I'd guess there could be a significant number of sites affected considering the many themes and starters that make use of this page transition technique.
Here's the bit of code that gets added to gatsby-browser.js to support scroll restoration with animated page transitions (which rely on gatsby-plugin-layout and your animation library of choice):
Essentially, scroll restoration no longer works correctly on popState when page transitions are involved.
Console logging the
savedPosition
that gets retrieved in the code snippet above always returns 0. There are two issues here:[x, y]
coordinate array as expected per the documentation here: https://www.gatsbyjs.com/docs/browser-apis/#shouldUpdateScrollwindow.scrollTo(0, savedPosition || 0)
, the user is always sent to the top of the page when using browser back or forward buttons.Steps to reproduce
On the demo link below, scroll all the way to the bottom of the index page, click the link to Page 2, and then click the browser back button. You will land back at the top of the index page rather than where you left off at the bottom.
Demo link: https://gatsby-scroll-restoration-issue.netlify.app/
Demo repo: https://github.com/blimpmason/gatsby-scroll-restoration-issue
Expected result
On the comparison demo link below (which uses an older version of Gatsby, v2.19.43, along with matching dependency versions), scroll all the way to the bottom of the index page, click the link to Page 2, and then click the browser back button. You should always land you exactly where you were at the bottom of the index page.
Demo link (working comparison): https://gatsby-scroll-restoration-issue-comparison.netlify.app/
Demo repo (working comparison): https://github.com/blimpmason/gatsby-scroll-restoration-issue-comparison
Actual result
You always end up back at the top of the page.
Environment
Hi to @wardpeet and @blainekasten who may have seen my misplaced comments on this issue in a merged PR thread!
The text was updated successfully, but these errors were encountered: