Gatsby site freezes after swiping to go back in iOS Safari

[huntercaron]

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

[KyleAMathews]

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

[huntercaron]

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.

[ryanditjia]

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:

1. Hook up iPhone (Web Inspector turned on) to MBA
2. Load up site
3. Navigate to post Braindump of ideas #1 (Pandas and Bananas)
4. Click record on Timelines inspector
5. Wait for ~1s
6. Navigate to previous screen, using back button (recording 1), and using edge swipe gesture (recording 2)
7. Start scrolling furiously
8. 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]

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

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

[KyleAMathews]

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

[hippotastic]

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.

[thomas-darling]

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.

[KyleAMathews]

@rutzfutz just fixed this in our upstream scroll-behavior taion/scroll-behavior#129! Thanks!

[hippotastic]

Most welcome! :-)

[joeshub]

@rutzfutz nice find and thanks for the fix! this was driving me crazy. 💯

[slk333]

I still have the problem, any idea why ?