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

fix: apply complete safe area formula used by Apple and Netflix
All checks were successful
build-website / build (push) Successful in 1m36s
Details

Browse Source 
- Use position:fixed with complete calc formula
- Include ALL safe area insets (top, bottom, left, right) in width/height
- Remove iOS-specific overrides that were interfering
- This is the pattern used by Apple.com and Netflix for full-screen video
This commit is contained in:
Matt
2025-09-25 16:32:57 +02:00
parent f534a4bba3
commit f36eca27b9
1 changed files with 14 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -184,15 +184,15 @@ onMounted(() => {
</script>
<style scoped>
/* Hero video container - absolute positioning to extend into safe areas */
/* Hero video container - COMPLETE safe area formula (Apple/Netflix pattern) */
.hero-video-container {
position: absolute; /* Use absolute to avoid iOS Safari position:fixed bugs */
/* Extend ABOVE viewport to fill safe area */
top: calc(-1 * env(safe-area-inset-top, 0px));
left: 0;
width: 100vw;
/* Increase height to include safe area */
height: calc(100vh + env(safe-area-inset-top, 0px));
position: fixed; /* Fixed with complete formula works better */
/* Extend into ALL safe areas */
top: calc(0px - env(safe-area-inset-top, 0px));
left: calc(0px - env(safe-area-inset-left, 0px));
/* CRITICAL: Include ALL safe area insets in width and height */
width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
z-index: 0; /* Base layer for video */
pointer-events: none;
overflow: hidden; /* Keep video content clipped */
@@ -203,32 +203,14 @@ onMounted(() => {
transition: transform 0.1s ease-out;
}
/* iOS Safari safe area extension - use env() only, no hardcoded fallbacks */
@supports (-webkit-touch-callout: none) {
.hero-video-container {
/* Use env() directly without hardcoded fallbacks */
top: calc(-1 * env(safe-area-inset-top, 0px));
height: calc(100vh + env(safe-area-inset-top, 0px));
}
}
/* iOS Safari safe area extension - removed to prevent interference with complete formula */
/* The main .hero-video-container rule now handles all safe areas properly */
/* Support for dynamic viewport height */
/* Support for dynamic viewport height - simplified */
@supports (height: 100dvh) {
.hero-video-container {
height: calc(100dvh + env(safe-area-inset-top, 0px));
}
/* iOS specific with dvh and proper env() usage */
@supports (-webkit-touch-callout: none) {
.hero-video-container {
height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Dynamic Island */
}
@media screen and (max-height: 812px) {
.hero-video-container {
height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Notch */
}
}
/* Update height calc to include ALL safe areas for dvh */
height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
}
}
@@ -278,7 +260,7 @@ onMounted(() => {
}
.hero-content {
position: absolute; /* Use absolute to match video container positioning */
position: fixed; /* Use fixed to match video container positioning */
top: 0; /* Start at viewport top */
left: 0;
right: 0;