Crash on any iOS device (Safari/Chrome) and Safari 11.1 (macOS)

[n3tman]

Platform

This bug report concerns:

• [x] Client
• [ ] Server

Details

Stack Trace:

f@https://beatsaver.com/src.4059cd8d.js:268:1068
https://beatsaver.com/src.4059cd8d.js:268:3493
_i@https://beatsaver.com/src.4059cd8d.js:74:77736
ro@https://beatsaver.com/src.4059cd8d.js:74:84866
ro@[native code]
lo@https://beatsaver.com/src.4059cd8d.js:74:85046
xa@https://beatsaver.com/src.4059cd8d.js:74:58481
xa@[native code]
https://beatsaver.com/src.4059cd8d.js:264:840
promiseReactionJob@[native code]

Probably because of some unsupported browser API, please check on https://caniuse.com/

Reproducing the Problem

Open website on:

• Safari 11.1 on macOS High Sierra
• Safari on iPhone XS (iOS 12)
• Chrome on iPhone XS (iOS 12)
• Safari/Chrome on iPad Pro 12.9

Further Detail

Screenshots from BrowserStack (real devices):

• iPhone XS   — Safari   — Chrome

• iPad Pro 12.9 (Chrome has the same issue)

• macOS High Sierra (not reproduced in Chrome or macOS Mojave / Safari 12)

[luludotdev]

I can't test on Safari macOS or iOS, actual stacktraces from development are required for me to fix this.

[BaliBalo]

I was only able to test quickly the prod site using BrowserStack so I don't have the full proper stack trace, but here is the error I got: Can't find variable: IntersectionObserver Which seems to be caused by react-intersection-observer in BeatmapScroller: https://github.com/lolPants/beatsaver-reloaded/blob/master/client/src/ts/components/Beatmap/BeatmapScroller.tsx#L2

The IntersectionObserver API has only been made available in Safari quite recently so I'm guessing a fair amount of Safari users still don't have access to it.

[BaliBalo]

Looks like there's an easy way to polyfill it: https://github.com/thebuilder/react-intersection-observer#polyfill