From bde7b606f2b068963f0a01d3240a3aeac2b65c90 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 10 Sep 2022 01:56:20 +0100 Subject: [PATCH 1/2] [Beta] Avoid grey screen on Safari iOS swipe --- beta/src/pages/_app.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 455ccdd72bf..06c2f8a91f0 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -25,6 +25,15 @@ if (typeof window !== 'undefined') { export default function MyApp({Component, pageProps}: AppProps) { const router = useRouter(); + + React.useEffect(() => { + // This is kind of a lie. + // We still rely on the manual Next.js scrollRestoration logic. + // However, we *also* don't want Safari grey screen during the back swipe gesture. + // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time. + history.scrollRestoration = 'auto'; + }, []); + React.useEffect(() => { const handleRouteChange = (url: string) => { ga('set', 'page', url); From 62843341c5fc497f5f7b218cb9be499bc5b6573f Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 10 Sep 2022 02:16:29 +0100 Subject: [PATCH 2/2] Gate to Safari --- beta/src/pages/_app.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 06c2f8a91f0..480630760c4 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -27,11 +27,18 @@ export default function MyApp({Component, pageProps}: AppProps) { const router = useRouter(); React.useEffect(() => { - // This is kind of a lie. - // We still rely on the manual Next.js scrollRestoration logic. - // However, we *also* don't want Safari grey screen during the back swipe gesture. - // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time. - history.scrollRestoration = 'auto'; + // Taken from StackOverflow. Trying to detect both Safari desktop and mobile. + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + if (isSafari) { + // This is kind of a lie. + // We still rely on the manual Next.js scrollRestoration logic. + // However, we *also* don't want Safari grey screen during the back swipe gesture. + // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time. + history.scrollRestoration = 'auto'; + } else { + // For other browsers, let Next.js set scrollRestoration to 'manual'. + // It seems to work better for Chrome and Firefox which don't animate the back swipe. + } }, []); React.useEffect(() => {