From 82e5b4506d891bc9103e6924057bb842d1e2da5b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 16:53:47 +0200
Subject: [PATCH] fix: complete iOS Safari safe area solution using inset and
 -webkit-fill-available

- Replace calc() with env() approach (which returns 0px in portrait)
- Use inset: 0 to fill entire viewport including safe areas
- Add -webkit-fill-available for proper iOS height handling
- Add iOS-specific meta tags for full-screen web app support
- Include style element with !important to override any conflicts
- Use @supports query to target only Safari browsers

This approach bypasses the buggy env() functions and uses native iOS solutions
---
 apps/website/components/HeroSection.vue | 46 +++++++++++++++----------
 apps/website/nuxt.config.ts             |  4 ++-
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 28ca789..45d6af9 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -112,31 +112,39 @@ const animateCount = () => {
 }
 
 onMounted(() => {
-  // NUCLEAR OPTION: Inject video directly into DOM, bypassing Vue/Nuxt entirely
+  // ULTIMATE FIX: Use inset: 0 and -webkit-fill-available to bypass env() bugs
   const videoHTML = `
-    <div id="ios-video-bg" style="
-      position: fixed;
-      top: calc(-1 * env(safe-area-inset-top, 0px));
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100vw;
-      height: calc(100vh + env(safe-area-inset-top, 0px));
-      z-index: -1;
-      background: #000;
-    ">
+    <style>
+      #ios-video-bg {
+        position: fixed !important;
+        inset: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        height: -webkit-fill-available !important;
+        z-index: -1 !important;
+        background: #000 !important;
+      }
+
+      @supports (-webkit-touch-callout: none) {
+        #ios-video-bg {
+          min-height: -webkit-fill-available !important;
+        }
+      }
+
+      #bg-video-element {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover !important;
+        object-position: center !important;
+      }
+    </style>
+    <div id="ios-video-bg">
       <video
         id="bg-video-element"
         autoplay
         muted
         playsinline
-        loop
-        style="
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          object-position: top center;
-        ">
+        loop>
         <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
       </video>
       <div style="
diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts
index 0a78313..8e1c1f7 100644
--- a/apps/website/nuxt.config.ts
+++ b/apps/website/nuxt.config.ts
@@ -54,7 +54,9 @@ export default defineNuxtConfig({
   app: {
     head: {
       meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
+        { name: 'apple-mobile-web-app-capable', content: 'yes' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
       ]
     }
   },