Gatsby: Gatsby site freezes after swiping to go back in iOS Safari

Created on 8 Nov 2017 · 11Comments · Source: gatsbyjs/gatsby

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.

gatsbyfreeze

As soon as the page go backs I try to scroll, but its completely frozen (until that highlighted state on the button goes away).

Source

huntercaron

👍4

Most helpful comment

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.

rutzfutz on 3 Feb 2018

👍3 ❤1

All 11 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

KyleAMathews on 13 Nov 2017

👍1

I can't seem to figure out how to export the profile from safari, trying to figure it out right now.

Here is a screenshot of the Javascript events that happen when the screen unfreezes after transition. Hopefully it's useful in some way.

gatsbyfreeze

huntercaron on 15 Nov 2017

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

Timestamps indicate time in "Timelines Inspector", _not_ timestamp in video
Site used to test: http://past-stream.surge.sh (based off tutorial 4)
Devices used: iPhone 6 on iOS 11.2.1 hooked up to MBA on High Sierra 10.13.2

Test procedure:

Hook up iPhone (Web Inspector turned on) to MBA
Load up site
Navigate to post #1 (Pandas and Bananas)
Click record on Timelines inspector
Wait for ~1s
Navigate to previous screen, using back button (recording 1), and using edge swipe gesture (recording 2)
Start scrolling furiously
Stop recording soon after site is scrollable

Timeline recording 1 — using back button

View recording on YouTube

Observations

First scroll is on 1.55s (roughly 0.55s after back button is triggered)
There’s only 1× Script Evaluated event

Timeline recording 2 — using edge swipe gesture

View recording on YouTube

Observations

First scroll is on 4.42s (roughly 3.42s after edge swipe), screen is empty (white all around) before then
There are 3× Script Evaluated events

End of sample

It 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.

ryanditjia on 29 Dec 2017

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.

vinylbase.now.sh — repo (has issue)
https://next-episode.now.sh/ — repo (no issue)

React-Static

nozzle.io (no issue)
blacksandsolutions.co (no issue)
manticoregames.com (has issue)

Misc.

instagram.com (has issue)

Hope this helps.

ryanditjia on 21 Jan 2018

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 :-(

KyleAMathews on 21 Jan 2018

// 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;
}

Hope this helps to make Gatsby even more awesome! Keep up the good work.

rutzfutz on 3 Feb 2018

👍3 ❤1

Yeah, we just discovered this freezing problem too, in a site based on the framework Aurelia.
It does not appear to be specific to any package or framework, but is as you say triggered by setting window.history.scrollRestoration to manual, and apparently also by just attaching an event handler to the scroll event of the page, regardless of what that handler does.

It’s clearly a bug in Safari, and a really annoying one too.