💄 Fix vh issue on ios safari

SoftInstigate · Sep 11, 2024 · 34711b1 · 34711b1
1 parent d90b659
commit 34711b1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -56,4 +56,15 @@
    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <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);
+
+    window.addEventListener('resize', () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+      console.debug('set css variable --vh =', vh);
+    })
+   </script>
 </head>
diff --git a/css/main.scss b/css/main.scss
@@ -225,14 +225,15 @@ text-black {
 }
 
 .iframe-parent {
-  height: calc(100vh - 64px);
+  height: calc(var(--vh, 1vh) * 100 - 64px); // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+  height: calc(100vh - 64px); // fallback
   border: none;
 }
 
 iframe {
   margin-top: 0; // fix position about navbar in ios safari
-  height: calc(100vh - 64px);
-  max-height: calc(100vh - 64px);
+  height: calc(var(--vh, 1vh) * 100 - 64px); // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+  height: calc(100vh - 64px); // fallback
   width: 100%;
   border: none;
 }

diff --git a/index.md b/index.md
@@ -43,23 +43,26 @@ stars-bounce: true
 <span id="st" class="hline"></span> -->
 
 <script>
-    var preventFirst = 0; // dirty trick to avoid scrolling on first load
+    var preventScroll = 0; // dirty trick to avoid scrolling on first load
+    document.addEventListener("DOMContentLoaded", () => preventScroll = 0);
+
     iframeResize({
         license: 'GPLv3',
         waitForLoad: true,
         onResized: ({ iframe, height, width, type }) => {
             if (document.readyState === 'complete') {
-                preventFirst++;
                 // const start = document.getElementById('start');
                 // const end = document.getElementById('end');
                 // const st = document.getElementById('st');
-                if (preventFirst > 1) {
+                if (preventScroll > 3) {
                     const offset = iframe.offsetTop;
                     const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
                     // start.style.top = (offset)+'px';
                     // end.style.top = (height+offset)+'px';
                     // st.style.top = (height+offset-vh)+'px';
                     window.scrollTo({top: height+offset-vh, left: 0, behavior: 'smooth'});
+                } else {
+                    preventScroll++;
                 }
             }
         }