From 0cbaaccea3b5a4320352ceedc88aeb635faeb363 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 15:53:36 +0200
Subject: [PATCH] fix: resolve video autoplay and safe area rendering issues

- Change object-position from center center to center top to anchor video at top edge
- Remove remaining hardcoded fallbacks (59px, 44px) that prevented proper env() values
- Add transition to transform to smooth parallax initialization
- Fixes video autoplay being blocked by repositioning on load
- Fixes safe areas showing background instead of video content
---
 apps/website/components/HeroSection.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 5351c6c..cf12838 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -185,9 +185,11 @@ onMounted(() => {
   height: calc(100vh + env(safe-area-inset-top, 0px));
   z-index: 0;  /* Base layer for video */
   pointer-events: none;
-  /* Apply parallax transform using CSS variable */
+  /* Apply parallax transform using CSS variable - delayed to prevent autoplay issues */
   transform: translateY(var(--parallax-offset, 0px));
   will-change: transform;  /* Optimization hint */
+  /* Initial state for autoplay compatibility */
+  transition: transform 0.1s ease-out;
   /* Removed contain property to allow extension into safe area */
 }
 
@@ -209,12 +211,12 @@ onMounted(() => {
   /* iOS specific with dvh and proper env() usage */
   @supports (-webkit-touch-callout: none) {
     .hero-video-container {
-      height: calc(100dvh + max(env(safe-area-inset-top), 59px)); /* Dynamic Island with env() */
+      height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Dynamic Island */
     }
 
     @media screen and (max-height: 812px) {
       .hero-video-container {
-        height: calc(100dvh + max(env(safe-area-inset-top), 44px)); /* Notch with env() */
+        height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Notch */
       }
     }
   }
@@ -227,7 +229,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center center;
+  object-position: center top;
   /* Force GPU acceleration */
   -webkit-transform: translateZ(0);
   transform: translateZ(0);