diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 455ccdd7..48063076 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -25,6 +25,22 @@ if (typeof window !== 'undefined') { export default function MyApp({Component, pageProps}: AppProps) { const router = useRouter(); + + React.useEffect(() => { + // 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(() => { const handleRouteChange = (url: string) => { ga('set', 'page', url);