matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: iOS-specific video extension into safe area with white fallback
All checks were successful
build-website / build (push) Successful in 1m39s
Details

Browse Source 
- Changed body background from black to white for clean fallback
- Added iOS-specific CSS to extend video 50px beyond safe area
- Used @supports (-webkit-touch-callout: none) to target only iOS Safari
- Added hardware acceleration to prevent header bobbing on iOS
- Non-iOS mobile devices maintain normal video positioning
- Ensures white background shows if video doesn't load/extend properly
This commit is contained in:
matt
2025-09-21 16:25:58 +02:00
parent 342a9123af
commit bed1067f4d
2 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/assets/css/main.css
View File

@@ -7,7 +7,7 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #000; /* Black background for notch area */ background: #fff; /* White background fallback for safe area */
} }
/* Smooth Scroll Behavior and iOS Overscroll Prevention */ /* Smooth Scroll Behavior and iOS Overscroll Prevention */

53
apps/website/assets/css/voyage-layout.css
View File

@@ -235,6 +235,16 @@ html {
padding: calc(var(--nav-padding-top-base) + var(--nav-safe-area-top)) 0 var(--nav-padding-bottom-base) 0; padding: calc(var(--nav-padding-top-base) + var(--nav-safe-area-top)) 0 var(--nav-padding-bottom-base) 0;
} }
/* iOS-specific navigation stabilization to prevent bobbing */
@supports (-webkit-touch-callout: none) {
.voyage-nav {
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden; /* iOS optimization */
}
}
@supports (top: constant(safe-area-inset-top)) { @supports (top: constant(safe-area-inset-top)) {
:root { :root {
--safe-area-top: constant(safe-area-inset-top); --safe-area-top: constant(safe-area-inset-top);
@@ -1729,23 +1739,50 @@ html {
max-width: 100vw !important; max-width: 100vw !important;
} }
/* Video extends into notch area on mobile */ /* iOS-specific video extension into safe area */
@supports (-webkit-touch-callout: none) {
/* Only iOS Safari */
.hero-video-container { .hero-video-container {
position: fixed !important; position: fixed !important;
left: 0; left: 0;
right: 0; right: 0;
/* Pull the background up into the unsafe area */ /* Extend beyond safe area to ensure coverage on iOS */
top: calc(-1 * env(safe-area-max-inset-top, env(safe-area-inset-top))); top: calc(-1 * (env(safe-area-inset-top, 0) + 50px)) !important;
width: 100vw; width: 100vw;
height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top))); height: calc(100lvh + env(safe-area-inset-top, 0) + 50px) !important;
z-index: 0; /* Behind content */ z-index: -1;
pointer-events: none; pointer-events: none;
background: #ffffff; /* White fallback if video doesn't load */
} }
/* Fallback for browsers without lvh support */ /* Extra insurance for iOS 15-26 */
@supports not (height: 100lvh) { @supports (height: 100dvh) {
.hero-video-container { .hero-video-container {
height: calc(100vh + env(safe-area-max-inset-top, env(safe-area-inset-top))); height: calc(100dvh + env(safe-area-inset-top, 0) + 50px) !important;
}
}
/* iOS-specific video sizing */
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top; /* Align to top for better notch coverage */
}
}
/* Non-iOS mobile devices keep normal positioning */
@supports not (-webkit-touch-callout: none) {
.hero-video-container {
position: fixed !important;
left: 0;
right: 0;
top: 0; /* Normal positioning for Android/other mobile */
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background: #ffffff;
} }
} }