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

fix: comprehensive safe area implementation for hero video
All checks were successful
build-website / build (push) Successful in 1m42s
Details

Browse Source 
- Remove overflow:clip from .hero-voyage that was blocking video extension
- Replace hardcoded -50px with proper env(safe-area-inset-top) calculations
- Update hero-content to use env() values directly instead of CSS variables
- Video now properly extends under notch/Dynamic Island on all iOS devices
- Works with Chrome mobile's dynamic address bar using lvh units
- Content stays within safe areas for proper usability
This commit is contained in:
matt
2025-09-21 18:06:56 +02:00
parent 67ae33fc09
commit a9217b54cb
2 changed files with 23 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -443,7 +443,7 @@ html {
min-height: 100vh; /* Fallback for browsers that don't support newer units */ min-height: 100vh; /* Fallback for browsers that don't support newer units */
min-height: -webkit-fill-available; /* iOS Safari - fills available space */ min-height: -webkit-fill-available; /* iOS Safari - fills available space */
min-height: 100dvh; /* Dynamic viewport height */ min-height: 100dvh; /* Dynamic viewport height */
overflow: clip; /* Prevents scrollbars while allowing content to extend */ overflow: visible; /* Allow video to extend into safe area */
overscroll-behavior-y: none; overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
max-width: 100vw !important; max-width: 100vw !important;
@@ -456,9 +456,10 @@ html {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
--hero-safe-area-top: var(--safe-area-cover-top); /* Pull up by safe-area to extend under notch */
top: calc(-1 * var(--hero-safe-area-top)); top: calc(-1 * env(safe-area-inset-top));
height: calc(100lvh + var(--hero-safe-area-top)); /* Grow height to compensate */
height: calc(100lvh + env(safe-area-inset-top));
transform: translate3d(0, var(--parallax-offset, 0px), 0); transform: translate3d(0, var(--parallax-offset, 0px), 0);
background: #ffffff; background: #ffffff;
z-index: 0; /* Behind content */ z-index: 0; /* Behind content */
@@ -468,7 +469,7 @@ html {
/* Fallback for browsers without lvh support */ /* Fallback for browsers without lvh support */
@supports not (height: 100lvh) { @supports not (height: 100lvh) {
.hero-video-container { .hero-video-container {
height: calc(100vh + var(--hero-safe-area-top)); height: calc(100vh + env(safe-area-inset-top));
} }
} }
@@ -512,8 +513,11 @@ html {
align-items: center; align-items: center;
justify-items: center; justify-items: center;
text-align: center; text-align: center;
/* Apply safe area padding HERE to protect content from being obscured */ /* Use env() directly for safe area padding */
padding: calc(var(--safe-area-cover-top) + clamp(2rem, 8vh, 5rem)) var(--space-md) calc(var(--safe-area-cover-bottom) + clamp(1.25rem, 3vh, 2.5rem)); padding-top: calc(env(safe-area-inset-top) + clamp(2rem, 8vh, 5rem));
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: calc(env(safe-area-inset-bottom) + clamp(1.25rem, 3vh, 2.5rem));
row-gap: clamp(2rem, 6vh, 4rem); row-gap: clamp(2rem, 6vh, 4rem);
} }

41
apps/website/components/HeroSection.vue
View File

@@ -172,45 +172,32 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
/* Hero video container - Fixed for both Safari notch and Chrome mobile */ /* Hero video container - proper safe area implementation */
.hero-video-container { .hero-video-container {
position: fixed; position: fixed;
top: 0;
left: 0; left: 0;
right: 0;
width: 100vw; width: 100vw;
/* Use 100dvh for dynamic viewport (Chrome mobile fix) */ /* Pull up by safe-area to extend under notch */
height: 100dvh; top: calc(-1 * env(safe-area-inset-top));
/* Fallback for browsers without dvh support */ /* Grow height to compensate */
height: 100vh; height: calc(100lvh + env(safe-area-inset-top));
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
background: #ffffff; background: #ffffff;
} }
/* Fallback for browsers without lvh */
@supports not (height: 100lvh) {
.hero-video-container {
height: calc(100vh + env(safe-area-inset-top));
}
}
/* Additional support for browsers with dvh */ /* Additional support for browsers with dvh */
@supports (height: 100dvh) { @supports (height: 100dvh) {
.hero-video-container { .hero-video-container {
height: 100dvh; height: calc(100dvh + env(safe-area-inset-top));
}
}
/* Safari-specific fix for notch/Dynamic Island */
@supports (-webkit-touch-callout: none) {
.hero-video-container {
/* Extend beyond safe area for Safari */
top: -50px; /* Covers notch (44px) and Dynamic Island (59px) */
height: calc(100vh + 50px);
/* Use dvh if available */
height: calc(100dvh + 50px);
}
/* Adjust for landscape orientation */
@media (orientation: landscape) {
.hero-video-container {
top: 0;
height: 100vh;
height: 100dvh;
}
} }
} }