Skip to content

Commit 8a1a82b

Browse files
authored
[Beta] Avoid grey screen on Safari iOS swipe (#5029)
* [Beta] Avoid grey screen on Safari iOS swipe * Gate to Safari
1 parent 13f0e17 commit 8a1a82b

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

beta/src/pages/_app.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,22 @@ if (typeof window !== 'undefined') {
2525

2626
export default function MyApp({Component, pageProps}: AppProps) {
2727
const router = useRouter();
28+
29+
React.useEffect(() => {
30+
// Taken from StackOverflow. Trying to detect both Safari desktop and mobile.
31+
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
32+
if (isSafari) {
33+
// This is kind of a lie.
34+
// We still rely on the manual Next.js scrollRestoration logic.
35+
// However, we *also* don't want Safari grey screen during the back swipe gesture.
36+
// Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time.
37+
history.scrollRestoration = 'auto';
38+
} else {
39+
// For other browsers, let Next.js set scrollRestoration to 'manual'.
40+
// It seems to work better for Chrome and Firefox which don't animate the back swipe.
41+
}
42+
}, []);
43+
2844
React.useEffect(() => {
2945
const handleRouteChange = (url: string) => {
3046
ga('set', 'page', url);

0 commit comments

Comments
 (0)