🐛 Fix sophia iframe height when mobile keyboard is open on IOS

SoftInstigate · Sep 12, 2024 · 20f583d · 20f583d
1 parent 4cded4a
commit 20f583d
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -57,14 +57,25 @@
    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
    {% include plausible.html %}
    <script>
-    let vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-    console.debug('set css variable --vh =', vh);
+    var lastVH = -1;
+    const w = window.visualViewport || window;
+    document.documentElement.style.setProperty('--vh', `${(w.height || w.innerHeight).toFixed(2) * 0.01}px`);
+    // console.debug('set css variable --vh =', document.documentElement.style.getPropertyValue('--vh'));
 
-    window.addEventListener('resize', () => {
-      let vh = window.innerHeight * 0.01;
-      document.documentElement.style.setProperty('--vh', `${vh}px`);
-      console.debug('set css variable --vh =', vh);
+    console.log(w)
+
+    w.addEventListener('resize', () => {
+      const _vh = ((w.height || w.innerHeight) * 0.01).toFixed(2);
+
+      if (lastVH === _vh) {
+        return;
+      }
+
+      lastVH = _vh;
+
+      document.documentElement.style.setProperty('--vh', `${_vh}px`);
+      window.scrollTo({top:0, left:0,behavior: 'instant'});
+      // console.debug('set css variable --vh =', _vh);
     })
    </script>
 </head>