Commit 23f193d8 authored by Patrick Lehner's avatar Patrick Lehner
Browse files

Restrict Safari detection to iOS-only

parent 6e646414
...@@ -742,13 +742,12 @@ body:not(.ios) .recording #background-container { ...@@ -742,13 +742,12 @@ body:not(.ios) .recording #background-container {
transition: transform 0.2s linear; transition: transform 0.2s linear;
} }
@media (max-width: 600px) { body.mobile-safari #install-app {
.safari #install-app { transform: translateY(0);
transform: translateY(0); }
}
.safari #install-app.hide { body.mobile-safari #install-app.hide {
transform: translateY(3rem); transform: translateY(3rem);
}
} }
#install-app a { #install-app a {
......
...@@ -2,7 +2,7 @@ import { h, render } from 'preact'; ...@@ -2,7 +2,7 @@ import { h, render } from 'preact';
import User from './user'; import User from './user';
import API from './api'; import API from './api';
import Pages from './components/pages'; import Pages from './components/pages';
import { isSafari, isFocus, isNativeIOS } from './utility'; import { isMobileSafari, isFocus, isNativeIOS } from './utility';
import DebugBox from './components/debug-box'; import DebugBox from './components/debug-box';
const LOAD_DELAY = 500; // before pulling the curtain const LOAD_DELAY = 500; // before pulling the curtain
...@@ -54,8 +54,8 @@ export default class App { ...@@ -54,8 +54,8 @@ export default class App {
document.body.classList.add('focus'); document.body.classList.add('focus');
} }
if (isSafari()) { if (isMobileSafari()) {
document.body.classList.add('safari'); document.body.classList.add('mobile-safari');
} }
this.user = new User(); this.user = new User();
......
...@@ -46,8 +46,18 @@ export function isFocus(): boolean { ...@@ -46,8 +46,18 @@ export function isFocus(): boolean {
return navigator.userAgent.indexOf('Focus') !== -1; 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 { export function isProduction(): boolean {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment