From 34711b13feab8073f684738dc607532c3b16ea79 Mon Sep 17 00:00:00 2001
From: Andrea Di Cesare <andrea@softinstigate.com>
Date: Wed, 11 Sep 2024 09:23:39 +0200
Subject: [PATCH] :lipstick: Fix vh issue on ios safari

---
 _includes/head.html | 11 +++++++++++
 css/main.scss       |  7 ++++---
 index.md            |  9 ++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index cdeea76f..4f786c2d 100644
--- 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>
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 3b802b90..56561c32 100644
--- 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
index 2fbb4b36..5b194588 100644
--- 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++;
                 }
             }
         }