[Beta] Avoid grey screen on Safari iOS swipe (#5029)

* [Beta] Avoid grey screen on Safari iOS swipe

* Gate to Safari

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