patx/afterdarklabs

fix viewport resizing ticker bug

Commit fd09d57 · patx · 2026-08-25T20:12:36-04:00

Changeset

fd09d5795b1925244f9163ef39d8320d7b9e6d2f

Parents

7f2789588c4aa5578f2da60a52562015f205a685

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/docs/index.html b/docs/index.html
index 0d5cebe..df5c49e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -231,10 +231,11 @@
         @media (max-width: 767px) {
             #hero {
                 box-sizing: border-box;
-                min-height: 100svh;
+                height: var(--mobile-hero-height, 100svh);
+                min-height: var(--mobile-hero-height, 100svh);
                 align-items: flex-start;
                 padding-top: 5.75rem;
-                padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
+                padding-bottom: 3.75rem;
             }
 
             .hero-content {
@@ -247,10 +248,6 @@
                 font-size: clamp(3.25rem, 17vw, 4.5rem);
             }
 
-            .hero-ticker {
-                padding-bottom: env(safe-area-inset-bottom);
-            }
-
             .hero-ticker-group {
                 padding-top: 0.95rem;
                 padding-bottom: 0.95rem;
@@ -630,6 +627,43 @@
     </footer>
 
     <script>
+        (function () {
+            const hero = document.getElementById('hero');
+            if (!hero) return;
+
+            const mobileLayout = window.matchMedia('(max-width: 767px)');
+            let lockedWidth = 0;
+            let resizeFrame = 0;
+
+            function lockMobileHeroHeight() {
+                resizeFrame = 0;
+
+                if (!mobileLayout.matches) {
+                    hero.style.removeProperty('--mobile-hero-height');
+                    lockedWidth = 0;
+                    return;
+                }
+
+                const layoutWidth = Math.round(document.documentElement.clientWidth);
+                if (Math.abs(layoutWidth - lockedWidth) < 2) return;
+
+                const visibleHeight = Math.round(window.visualViewport?.height || window.innerHeight);
+                if (!visibleHeight) return;
+
+                lockedWidth = layoutWidth;
+                hero.style.setProperty('--mobile-hero-height', `${visibleHeight}px`);
+            }
+
+            function scheduleHeroHeightLock() {
+                if (!resizeFrame) resizeFrame = window.requestAnimationFrame(lockMobileHeroHeight);
+            }
+
+            window.addEventListener('resize', scheduleHeroHeightLock);
+            window.visualViewport?.addEventListener('resize', scheduleHeroHeightLock);
+            mobileLayout.addEventListener?.('change', scheduleHeroHeightLock);
+            lockMobileHeroHeight();
+        })();
+
         (function () {
             const ticker = document.querySelector('.hero-ticker');
             const track = ticker?.querySelector('.hero-ticker-track');