From 9ea7c32bfdec3857016bfc1acaec78ae099c8b86 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 2 Sep 2022 15:25:47 +0300
Subject: [PATCH] add workaround for old webkit

---
 frontend/public/global.css |  6 +++---
 frontend/src/responsive.js |  3 +++
 frontend/src/storage.js    | 13 ++++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 4e988b1..d7423a7 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -73,9 +73,6 @@ html, body {
 
 	color-scheme: dark;
 	accent-color: var(--purple-2);
-
-	width: var(--viewportWidth);
-	height: var(--viewportHeight);
 }
 
 body {
@@ -90,6 +87,9 @@ body {
 
 	display: flex;
 	flex-direction: column;
+
+	width: var(--viewportWidth);
+	height: var(--viewportHeight);
 }
 
 /* fullscreen message */
diff --git a/frontend/src/responsive.js b/frontend/src/responsive.js
index 3fdd2f4..858ecbd 100644
--- a/frontend/src/responsive.js
+++ b/frontend/src/responsive.js
@@ -8,6 +8,9 @@ function initViewportSizeHandler() {
     if (method === "dynamicViewportUnits") {
         root.style.setProperty("--viewportWidth", "100dvw");
         root.style.setProperty("--viewportHeight", "100dvh");
+    } else if (method === "webkitHack") {
+        root.style.setProperty("--viewportWidth", "100vw");
+        root.style.setProperty("--viewportHeight", "-webkit-fill-available");
     } else if (method === "javascriptResponsive") {
         const updateUnits = () => {
             root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
diff --git a/frontend/src/storage.js b/frontend/src/storage.js
index 8359942..11a6a9c 100644
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@@ -19,9 +19,13 @@ const defaults = {
         return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";
     },
     "ui:useragent:viewportSizeJustificationMethod": () => {
+        const isTouch = getItem("ui:useragent:formFactor") === "touch";
+
         if (CSS.supports("(width: 1dvw)")) {
             return "dynamicViewportUnits";
-        } else if (getItem("ui:useragent:formFactor") === "touch") {
+        } else if (isTouch && CSS.supports("(-webkit-touch-callout: none)")) {
+            return "webkitHack";
+        } else if (isTouch) {
             return "javascriptResponsive";
         } else {
             return "normalUnits";
@@ -61,10 +65,15 @@ export function init() {
     if (!persistentProvider)
         return;
 
+    didCacheProvider = true;
+
     store.forEach((defaultValue, key) => {
         const override = persistentProvider.getItem(key);
         if (override !== null) {
             try {
+                if (typeof defaultValue === "function") {
+                    defaultValue = defaultValue();
+                }
                 store.set(key, typeof defaultValue === "string" ? override : JSON.parse(override));
             } catch (o_O) {
                 console.warn("[Storage]", `init(): An exception was thrown while parsing the value of key "${key}" from persistentProvider. The key "${key}" will be removed from persistentProvider.`, o_O);
@@ -72,8 +81,6 @@ export function init() {
             }
         }
     });
-
-    didCacheProvider = true;
 }
 
 export function apiRoute(fragment) {