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

fix: restore proper CSS hierarchy for iOS Safari safe areas
All checks were successful
build-website / build (push) Successful in 1m36s
Details

Browse Source 
- Remove forced navy background from body element
- Restore white background for body to fix content sections
- Fix hero content padding to allow extension into safe areas
- Remove padding-top additions that pushed content away from safe areas

This fixes the regression where blue background showed through during scrolling
and allows content to properly extend into iOS Safari safe areas.
This commit is contained in:
Matt
2025-09-25 11:55:17 +02:00
parent 1d8e9be567
commit 9e8b7b3075
1 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -112,8 +112,8 @@ html {
} }
body { body {
/* Ensure navy background for safe area coverage */ /* Body should have light background for content sections */
background-color: #001f3f !important; /* Force navy background */ /* Safe area coverage is handled by HTML element */
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
/* Critical: Don't add padding that would push content down */ /* Critical: Don't add padding that would push content down */
@@ -233,8 +233,7 @@ img {
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--text-dark); color: var(--text-dark);
/* Removed white background that was overriding navy */ background: var(--bg-light); /* Body needs light background for content sections */
/* background: var(--bg-light); -- REMOVED to maintain navy background */
max-width: 100vw !important; max-width: 100vw !important;
position: relative; position: relative;
line-height: 1.6; line-height: 1.6;
@@ -537,8 +536,8 @@ html {
/* iOS-specific padding for hero content */ /* iOS-specific padding for hero content */
@supports (-webkit-touch-callout: none) { @supports (-webkit-touch-callout: none) {
.hero-content { .hero-content {
/* Use larger fallback for Dynamic Island devices */ /* Allow content to extend into safe area, don't push it down */
padding-top: calc(max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px) + clamp(2rem, 8vh, 5rem)); padding-top: clamp(2rem, 8vh, 5rem); /* Normal padding only, no safe area addition */
} }
} }
@@ -1812,9 +1811,9 @@ html {
} }
.hero-content { .hero-content {
/* Adjust padding to account for safe areas on all sides */ /* Adjust padding to allow content into safe areas */
padding: clamp(1rem, 4vw, 2rem); padding: clamp(1rem, 4vw, 2rem);
padding-top: max(env(safe-area-max-inset-top, env(safe-area-inset-top, 0)), clamp(2rem, 4vw, 3rem)); padding-top: clamp(2rem, 4vw, 3rem); /* Normal padding without safe area addition */
padding-bottom: max(env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)), clamp(1rem, 4vw, 2rem)); padding-bottom: max(env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)), clamp(1rem, 4vw, 2rem));
padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem)); padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem)); padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));