fix: use negative positioning for iOS notch video extension
All checks were successful
build-website / build (push) Successful in 1m32s
All checks were successful
build-website / build (push) Successful in 1m32s
- Replace broken fixed positioning with absolute + negative top - Video now extends calc(-1 * env(safe-area-inset-top)) above container - Height compensated with calc(100dvh + env(safe-area-inset-top)) - Container uses position: relative with overflow: visible - Fixes iOS Safari bug where fixed positioning doesn't work properly This approach allows the video to extend under the iOS notch/Dynamic Island while keeping interactive content in safe areas.
This commit is contained in:
@@ -1674,28 +1674,27 @@ html {
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero-voyage {
|
||||
/* Use relative positioning to contain the absolutely positioned video */
|
||||
position: relative;
|
||||
padding: 0;
|
||||
/* iOS-specific height handling */
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
/* Set height to dynamic viewport height */
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
min-height: 100dvh;
|
||||
/* Video will extend under notch - no padding-top here */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
overflow-x: hidden !important;
|
||||
/* CRITICAL: Allow overflow visible so video can extend beyond container */
|
||||
overflow: visible !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
/* Make video container fixed on mobile to fill entire viewport including notch */
|
||||
/* Use negative positioning to extend video into notch area */
|
||||
.hero-video-container {
|
||||
position: fixed !important;
|
||||
inset: 0;
|
||||
position: absolute !important;
|
||||
/* Negative top to extend into notch area */
|
||||
top: calc(-1 * env(safe-area-inset-top, 0px));
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
height: 100dvh;
|
||||
/* Height includes the safe area we're extending into */
|
||||
height: calc(100dvh + env(safe-area-inset-top, 0px));
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user