fix: remove CSS conflicts preventing iOS video from extending under notch
All checks were successful
build-website / build (push) Successful in 1m33s

- Removed incorrect height calculation that added safe areas to video height
- Removed conflicting absolute positioning from main.css
- Video container now properly uses fixed positioning on mobile
- Desktop layout preserved with absolute positioning

The video now correctly extends edge-to-edge under the iOS notch/Dynamic Island
This commit is contained in:
2025-09-21 13:27:16 +02:00
parent b97be94e2f
commit cea7577b52
2 changed files with 6 additions and 10 deletions

View File

@@ -38,10 +38,8 @@ body {
height: 100dvh; height: 100dvh;
} }
.hero-video-container { /* Removed conflicting height calculation for hero-video-container
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)); The video container should fill the viewport, not exceed it */
height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
} }
/* Handle dynamic viewport on mobile browsers */ /* Handle dynamic viewport on mobile browsers */
@@ -311,8 +309,10 @@ body {
} }
/* Hero Section */ /* Hero Section */
/* Note: hero-video-container positioning is handled in voyage-layout.css
for proper mobile/desktop behavior and iOS notch support */
.hero-video-container { .hero-video-container {
@apply absolute inset-0 w-full h-full overflow-hidden; /* @apply absolute inset-0 w-full h-full overflow-hidden; */
will-change: transform; will-change: transform;
} }

View File

@@ -425,11 +425,7 @@ html {
.hero-video-container { .hero-video-container {
position: absolute; position: absolute;
/* Simple positioning - fill entire parent container */ inset: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;