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 {
margin: 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 */

65
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;
}
/* 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)) {
:root {
--safe-area-top: constant(safe-area-inset-top);
@@ -1729,23 +1739,50 @@ html {
max-width: 100vw !important;
}
/* Video extends into notch area on mobile */
.hero-video-container {
position: fixed !important;
left: 0;
right: 0;
/* Pull the background up into the unsafe area */
top: calc(-1 * env(safe-area-max-inset-top, env(safe-area-inset-top)));
width: 100vw;
height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
z-index: 0; /* Behind content */
pointer-events: none;
/* iOS-specific video extension into safe area */
@supports (-webkit-touch-callout: none) {
/* Only iOS Safari */
.hero-video-container {
position: fixed !important;
left: 0;
right: 0;
/* Extend beyond safe area to ensure coverage on iOS */
top: calc(-1 * (env(safe-area-inset-top, 0) + 50px)) !important;
width: 100vw;
height: calc(100lvh + env(safe-area-inset-top, 0) + 50px) !important;
z-index: -1;
pointer-events: none;
background: #ffffff; /* White fallback if video doesn't load */
}
/* Extra insurance for iOS 15-26 */
@supports (height: 100dvh) {
.hero-video-container {
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 */
}
}
/* Fallback for browsers without lvh support */
@supports not (height: 100lvh) {
/* Non-iOS mobile devices keep normal positioning */
@supports not (-webkit-touch-callout: none) {
.hero-video-container {
height: calc(100vh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
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;
}
}