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

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

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