-
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
Gatsby site freezes after swiping to go back in iOS Safari #2842
Comments
Tested this on my iphone 6 and was able to reproduce this. Would love it if you could profile what's happening https://stackoverflow.com/questions/25970466/javascript-profiling-ios-8-safari |
I’m able to reproduce this issue on all Gatsby sites, on both iPhone and iPad. The problem doesn’t occur when using the back button. So I recorded timelines to check the differences between the 2. Please help me make sense of this finding. Notes
Test procedure:
Timeline recording 1 — using back buttonObservations
Timeline recording 2 — using edge swipe gestureObservations
End of sampleIt isn’t obvious to me what’s causing the delay in render. I’m not much of a programmer yet, but I’d love to be able to help. Let me know if you need more data / test samples. |
As much as I want to see this fixed, this problem appears to be bigger than just Gatsby’s. It’s been bugging me, so I checked out other sites built with other tools (Next, React-Static). Some face similar issue. Next
React-Static
Misc.
Hope this helps. |
Oh forgot to mention it here but someone on Twitter said this is a known safari issue so not much we can do about it. Thanks for your research! This is super obnoxious :-( |
Unfortunately, this obnoxious bug still affects all sites generated by Gatsby on iOS Safari. I just stumbled upon this issue through a Google search and I'm surprised that it was closed without a working solution. Fortunately, after some hours of debugging, I found the solution: This bug is caused by the scroll-behavior npm package that is a part of Gatsby's client-side app bundle. More precisely, the following lines are causing the bug: // This helps avoid some jankiness in fighting against the browser's
// default scroll behavior on `POP` transitions.
/* istanbul ignore else: Travis browsers all support this */
if ('scrollRestoration' in window.history) {
this._oldScrollRestoration = window.history.scrollRestoration;
window.history.scrollRestoration = 'manual';
} else {
this._oldScrollRestoration = null;
} If you comment out the line that sets window.history.scrollRestoration to 'manual', the iOS Safari freeze bug is gone. I will also open a bug in the scroll-behavior repository to make the author aware of this problem. I'm sure they will be able to find a better solution than just commenting out the line. Hope this helps to make Gatsby even more awesome! Keep up the good work. |
Yeah, we just discovered this freezing problem too, in a site based on the framework Aurelia. It’s clearly a bug in Safari, and a really annoying one too. |
@rutzfutz just fixed this in our upstream scroll-behavior taion/scroll-behavior#129! Thanks! |
Most welcome! :-) |
@rutzfutz nice find and thanks for the fix! this was driving me crazy. 💯 |
I still have the problem, any idea why ? |
Currently on every Gatsby site, when swiping to go back in mobile safari, the screen freezes up and sometimes goes blank for ~2-6 seconds. This really breaks the flow of the site.
Reproducible on sites such as https://www.gatsbyjs.org/, https://reactjs.org/, etc. I haven't found any that is doesn't apply to.
Reproducible on multiple iOS 11.0.1 & 11.1 devices (iPhone 8, iPad Mini).
I hooked up remote debugging and didn't see any logs/errors.
As soon as the page go backs I try to scroll, but its completely frozen (until that highlighted state on the button goes away).
The text was updated successfully, but these errors were encountered: