From f36eca27b9c767142bba2a01c51532acd58918fb Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 16:32:57 +0200
Subject: [PATCH] fix: apply complete safe area formula used by Apple and
 Netflix

- Use position:fixed with complete calc formula
- Include ALL safe area insets (top, bottom, left, right) in width/height
- Remove iOS-specific overrides that were interfering
- This is the pattern used by Apple.com and Netflix for full-screen video
---
 apps/website/components/HeroSection.vue | 46 ++++++++-----------------
 1 file changed, 14 insertions(+), 32 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 3435af6..f5822d5 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -184,15 +184,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - absolute positioning to extend into safe areas */
+/* Hero video container - COMPLETE safe area formula (Apple/Netflix pattern) */
 .hero-video-container {
-  position: absolute;  /* Use absolute to avoid iOS Safari position:fixed bugs */
-  /* Extend ABOVE viewport to fill safe area */
-  top: calc(-1 * env(safe-area-inset-top, 0px));
-  left: 0;
-  width: 100vw;
-  /* Increase height to include safe area */
-  height: calc(100vh + env(safe-area-inset-top, 0px));
+  position: fixed;  /* Fixed with complete formula works better */
+  /* Extend into ALL safe areas */
+  top: calc(0px - env(safe-area-inset-top, 0px));
+  left: calc(0px - env(safe-area-inset-left, 0px));
+  /* CRITICAL: Include ALL safe area insets in width and height */
+  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
+  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
   z-index: 0;  /* Base layer for video */
   pointer-events: none;
   overflow: hidden; /* Keep video content clipped */
@@ -203,32 +203,14 @@ onMounted(() => {
   transition: transform 0.1s ease-out;
 }
 
-/* iOS Safari safe area extension - use env() only, no hardcoded fallbacks */
-@supports (-webkit-touch-callout: none) {
-  .hero-video-container {
-    /* Use env() directly without hardcoded fallbacks */
-    top: calc(-1 * env(safe-area-inset-top, 0px));
-    height: calc(100vh + env(safe-area-inset-top, 0px));
-  }
-}
+/* iOS Safari safe area extension - removed to prevent interference with complete formula */
+/* The main .hero-video-container rule now handles all safe areas properly */
 
-/* Support for dynamic viewport height */
+/* Support for dynamic viewport height - simplified */
 @supports (height: 100dvh) {
   .hero-video-container {
-    height: calc(100dvh + env(safe-area-inset-top, 0px));
-  }
-
-  /* iOS specific with dvh and proper env() usage */
-  @supports (-webkit-touch-callout: none) {
-    .hero-video-container {
-      height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Dynamic Island */
-    }
-
-    @media screen and (max-height: 812px) {
-      .hero-video-container {
-        height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Notch */
-      }
-    }
+    /* Update height calc to include ALL safe areas for dvh */
+    height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
   }
 }
 
@@ -278,7 +260,7 @@ onMounted(() => {
 }
 
 .hero-content {
-  position: absolute;  /* Use absolute to match video container positioning */
+  position: fixed;  /* Use fixed to match video container positioning */
   top: 0;  /* Start at viewport top */
   left: 0;
   right: 0;