Restrict Safari detection to iOS-only

web/css/index.css

@@ -742,13 +742,12 @@ body:not(.ios) .recording #background-container {
   transition: transform 0.2s linear;
 }
 
-@media (max-width: 600px) {
-  .safari #install-app {
-    transform: translateY(0);
-  }
-  .safari #install-app.hide {
-    transform: translateY(3rem);
-  }
+body.mobile-safari #install-app {
+  transform: translateY(0);
+}
+
+body.mobile-safari #install-app.hide {
+  transform: translateY(3rem);
 }
 
 #install-app a {

web/src/lib/app.tsx

@@ -2,7 +2,7 @@ import { h, render } from 'preact';
 import User from './user';
 import API from './api';
 import Pages from './components/pages';
-import { isSafari, isFocus, isNativeIOS } from './utility';
+import { isMobileSafari, isFocus, isNativeIOS } from './utility';
 import DebugBox from './components/debug-box';
 
 const LOAD_DELAY = 500; // before pulling the curtain
@@ -54,8 +54,8 @@ export default class App {
       document.body.classList.add('focus');
     }
 
-    if (isSafari()) {
-      document.body.classList.add('safari');
+    if (isMobileSafari()) {
+      document.body.classList.add('mobile-safari');
     }
 
     this.user = new User();

web/src/lib/utility.ts

@@ -46,8 +46,18 @@ export function isFocus(): boolean {
   return navigator.userAgent.indexOf('Focus') !== -1;
 }
 
-export function isSafari(): boolean {
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+/**
+ * Check whether the browser is mobile Safari (i.e. on iOS).
+ * 
+ * The logic is collected from answers to this SO question: https://stackoverflow.com/q/3007480
+ */
+export function isMobileSafari(): boolean {
+  const userAgent = window.navigator.userAgent;
+  const isIOS = /(iPod|iPhone|iPad)/i.test(userAgent);
+  const isWebkit = /AppleWebKit/i.test(userAgent);
+  const isIOSSafari =
+    isIOS && isWebkit && !/(Chrome|CriOS|OPiOS)/.test(userAgent);
+  return isIOSSafari;
 }
 
 export function isProduction(): boolean {