From bed1067f4d94e4fe882b006606c2e1a7546c87ca Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 16:25:58 +0200
Subject: [PATCH] fix: iOS-specific video extension into safe area with white
 fallback

- Changed body background from black to white for clean fallback
- Added iOS-specific CSS to extend video 50px beyond safe area
- Used @supports (-webkit-touch-callout: none) to target only iOS Safari
- Added hardware acceleration to prevent header bobbing on iOS
- Non-iOS mobile devices maintain normal video positioning
- Ensures white background shows if video doesn't load/extend properly
---
 apps/website/assets/css/main.css          |  2 +-
 apps/website/assets/css/voyage-layout.css | 65 ++++++++++++++++++-----
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 80aeab8..db1ab87 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -7,7 +7,7 @@
 html, body {
   margin: 0;
   padding: 0;
-  background: #000; /* Black background for notch area */
+  background: #fff; /* White background fallback for safe area */
 }
 
 /* Smooth Scroll Behavior and iOS Overscroll Prevention */
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index d218c05..e71810a 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -235,6 +235,16 @@ html {
     padding: calc(var(--nav-padding-top-base) + var(--nav-safe-area-top)) 0 var(--nav-padding-bottom-base) 0;
 }
 
+/* iOS-specific navigation stabilization to prevent bobbing */
+@supports (-webkit-touch-callout: none) {
+    .voyage-nav {
+        will-change: transform;
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+        -webkit-backface-visibility: hidden; /* iOS optimization */
+    }
+}
+
 @supports (top: constant(safe-area-inset-top)) {
     :root {
         --safe-area-top: constant(safe-area-inset-top);
@@ -1729,23 +1739,50 @@ html {
         max-width: 100vw !important;
     }
 
-    /* Video extends into notch area on mobile */
-    .hero-video-container {
-        position: fixed !important;
-        left: 0;
-        right: 0;
-        /* Pull the background up into the unsafe area */
-        top: calc(-1 * env(safe-area-max-inset-top, env(safe-area-inset-top)));
-        width: 100vw;
-        height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
-        z-index: 0; /* Behind content */
-        pointer-events: none;
+    /* iOS-specific video extension into safe area */
+    @supports (-webkit-touch-callout: none) {
+        /* Only iOS Safari */
+        .hero-video-container {
+            position: fixed !important;
+            left: 0;
+            right: 0;
+            /* Extend beyond safe area to ensure coverage on iOS */
+            top: calc(-1 * (env(safe-area-inset-top, 0) + 50px)) !important;
+            width: 100vw;
+            height: calc(100lvh + env(safe-area-inset-top, 0) + 50px) !important;
+            z-index: -1;
+            pointer-events: none;
+            background: #ffffff; /* White fallback if video doesn't load */
+        }
+
+        /* Extra insurance for iOS 15-26 */
+        @supports (height: 100dvh) {
+            .hero-video-container {
+                height: calc(100dvh + env(safe-area-inset-top, 0) + 50px) !important;
+            }
+        }
+
+        /* iOS-specific video sizing */
+        .hero-video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center top; /* Align to top for better notch coverage */
+        }
     }
 
-    /* Fallback for browsers without lvh support */
-    @supports not (height: 100lvh) {
+    /* Non-iOS mobile devices keep normal positioning */
+    @supports not (-webkit-touch-callout: none) {
         .hero-video-container {
-            height: calc(100vh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
+            position: fixed !important;
+            left: 0;
+            right: 0;
+            top: 0; /* Normal positioning for Android/other mobile */
+            width: 100vw;
+            height: 100vh;
+            z-index: -1;
+            pointer-events: none;
+            background: #ffffff;
         }
     }