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

Fix iPhone Safari viewport to fill entire screen
All checks were successful
build-website / build (push) Successful in 1m31s
Details

Browse Source 
- Add viewport-fit=cover to meta tag for safe area extension
- Implement iOS-specific height handling with -webkit-fill-available
- Use dynamic viewport height (100dvh) for proper mobile behavior
- Extend video container beyond safe areas with negative positioning
- Add safe area padding with env() variables for content positioning
- Include mobile-specific @supports queries for better compatibility

This ensures the hero section fills the entire iPhone viewport from top to bottom, extending behind the status bar and home indicator while keeping content readable within safe areas.
This commit is contained in:
matt
2025-09-19 10:36:14 +02:00
parent 052399e3f7
commit 86401b91fc
3 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -398,7 +398,11 @@ html {
/* Hero Section */
.hero-voyage {
position: relative;
height: 100dvh;
height: 100vh; /* Fallback for browsers that don't support newer units */
height: -webkit-fill-available; /* iOS Safari */
height: 100dvh; /* Dynamic viewport height */
min-height: 100vh;
min-height: -webkit-fill-available;
min-height: 100dvh;
overflow: hidden;
overscroll-behavior-y: none;
@@ -406,13 +410,20 @@ html {
overflow-x: hidden !important;
max-width: 100vw !important;
contain: layout;
/* Extend into safe areas on iOS */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.hero-video-container {
position: absolute;
inset: 0;
/* Extend beyond safe areas */
top: calc(-1 * env(safe-area-inset-top));
left: 0;
right: 0;
bottom: calc(-1 * env(safe-area-inset-bottom));
width: 100%;
height: 100%;
height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
overflow: hidden;
z-index: 1;
}
@@ -1659,21 +1670,33 @@ html {
@media (max-width: 768px) {
.hero-voyage {
padding: 0;
/* iOS-specific height handling */
height: 100vh;
height: -webkit-fill-available;
height: 100dvh;
min-height: 100vh;
min-height: -webkit-fill-available;
min-height: 100dvh;
height: 100dvh;
height: 100dvh;
/* Extend into safe areas */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
overflow-x: hidden !important;
max-width: 100vw !important;
}
.hero-content {
/* Adjust padding to account for safe areas */
padding: clamp(1rem, 4vw, 2rem);
padding-top: max(env(safe-area-inset-top), clamp(1rem, 4vw, 2rem));
padding-bottom: max(env(safe-area-inset-bottom), clamp(1rem, 4vw, 2rem));
overflow-x: hidden;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: -webkit-fill-available;
min-height: 100dvh;
}