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