fix: remove CSS conflicts preventing iOS video from extending under notch
All checks were successful
build-website / build (push) Successful in 1m33s
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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user