From f94e3584ce4f5e96b11bdd6b6b2f1c521942894b Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 18:51:34 +0200
Subject: [PATCH] fix: implement Vue 3 Teleport to bypass DOM containment for
 iOS video extension
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrapped Teleport in ClientOnly to avoid SSR/hydration issues
- Replaced env() with hardcoded -59px for Dynamic Island (Safari bug workaround)
- Added !important flags to ensure styles aren't overridden
- Set overflow: visible on hero-voyage container
- Used z-index: 0 to ensure video stays behind content

This addresses the Nuxt SSG + Teleport incompatibility and iOS Safari's env() bug

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/components/HeroSection.vue | 119 +++++++++++-------------
 1 file changed, 55 insertions(+), 64 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index da543d0..b46cbd3 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -1,37 +1,40 @@
 <template>
   <section class="hero-voyage" id="heroSection">
     <!-- Hero video background teleported to body for proper safe area extension -->
-    <Teleport to="body">
-      <div ref="videoContainer" class="hero-video-container hero-video-teleported">
-        <!-- White overlay that fades out when video is ready -->
-        <div
-          class="video-white-overlay"
-          :class="{ 'fade-out': videoLoaded }"
-        />
+    <!-- Using ClientOnly to avoid SSR/hydration issues with Teleport -->
+    <ClientOnly>
+      <Teleport to="body">
+        <div ref="videoContainer" class="hero-video-container hero-video-teleported">
+          <!-- White overlay that fades out when video is ready -->
+          <div
+            class="video-white-overlay"
+            :class="{ 'fade-out': videoLoaded }"
+          />
 
-        <video
-          ref="videoElement"
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="auto"
-          class="hero-video"
-          :class="{ 'video-loaded': videoLoaded }"
-          @loadeddata="handleVideoLoaded"
-          @canplaythrough="handleVideoLoaded"
-          @play="handleVideoLoaded"
-        >
-          <source
-            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
-            type="video/mp4"
+          <video
+            ref="videoElement"
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="auto"
+            class="hero-video"
+            :class="{ 'video-loaded': videoLoaded }"
+            @loadeddata="handleVideoLoaded"
+            @canplaythrough="handleVideoLoaded"
+            @play="handleVideoLoaded"
           >
-        </video>
+            <source
+              src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+              type="video/mp4"
+            >
+          </video>
 
-        <div class="hero-overlay gradient-warm" />
-        <div class="hero-overlay gradient-depth" />
-      </div>
-    </Teleport>
+          <div class="hero-overlay gradient-warm" />
+          <div class="hero-overlay gradient-depth" />
+        </div>
+      </Teleport>
+    </ClientOnly>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
       <div class="hero-main">
@@ -174,50 +177,36 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - Safari-compatible safe area implementation */
+/* Hero video container - Hardcoded safe area implementation for iOS */
 .hero-video-container {
-  position: fixed;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  /* Default fallback for devices without notch */
-  top: 0;
-  height: 100vh;
-  z-index: 1;
-  pointer-events: none;
+  position: fixed !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100vw !important;
+  /* Hardcoded for iPhone 14/15 Pro Dynamic Island */
+  /* Using negative value to extend into safe area */
+  top: -59px !important;
+  height: calc(100vh + 59px) !important;
+  z-index: 0 !important;
+  pointer-events: none !important;
   background: #ffffff;
 }
 
-/* Teleported video container - positioned at body level to bypass DOM containment */
+/* Teleported video container - ensure it stays at body level */
 .hero-video-teleported {
   position: fixed !important;
-  z-index: 1 !important;
+  z-index: 0 !important;
+  /* Force the video to extend beyond safe area boundaries */
+  top: -59px !important;
+  height: calc(100vh + 59px) !important;
 }
 
-/* Use @supports with max() as recommended by Apple for safe area */
-@supports(padding: max(0px)) {
-  .hero-video-container {
-    /* Use max() to provide fallback when env() returns 0 (Safari bug) */
-    top: calc(-1 * max(env(safe-area-inset-top), 20px));
-    height: calc(100vh + max(env(safe-area-inset-top), 20px));
-  }
-}
-
-/* iOS-specific fallback using -webkit-touch-callout detection */
-@supports (-webkit-touch-callout: none) {
-  .hero-video-container {
-    /* Hardcoded fallback for iPhone 14/15 Pro Dynamic Island (59px) */
-    /* and iPhone X-13 notch (44px) - uses larger value for safety */
-    top: -59px;
-    height: calc(100vh + 59px);
-  }
-
-  /* Try env() with both modern and legacy syntax */
-  @supports(padding: max(0px)) {
-    .hero-video-container {
-      top: calc(-1 * max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
-      height: calc(100vh + max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
-    }
+/* Fallback for older iPhones with smaller notch */
+@media screen and (max-height: 812px) {
+  .hero-video-container,
+  .hero-video-teleported {
+    top: -44px !important;
+    height: calc(100vh + 44px) !important;
   }
 }
 
@@ -278,6 +267,8 @@ onMounted(() => {
   max-width: 100vw !important;
   position: relative;
   min-height: 100vh;
+  /* Explicitly allow overflow to ensure video can extend */
+  overflow: visible !important;
 }
 
 .hero-main {