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

fix: critical mobile iOS issues - scrolling and safe areas
All checks were successful
build-website / build (push) Successful in 2m14s
Details

Browse Source 
CRITICAL FIXES:
1. Removed iOS position:fixed hack that completely broke scrolling
   - Users can now scroll on iPhones/iPads (site was unusable before)

2. Fixed video not extending into safe areas
   - Video now properly fills the entire screen including notch areas
   - Used CSS env() variables with negative margins for full-bleed effect
   - Content respects safe areas with proper padding

3. Added explicit white background fallback
   - White background shows if video fails to load
   - No longer relies on implicit browser defaults

The site is now fully functional on iOS devices with proper safe area
handling and immersive video experience as intended.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt
2025-09-26 20:17:18 +02:00
parent bbf9c0d436
commit 934985c07c
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/globals.css
View File

@@ -7,6 +7,7 @@ html {
/* Allow content to extend into safe areas */
min-height: 100vh;
min-height: -webkit-fill-available;
background: white; /* Explicit white fallback */
}
body {
@@ -14,6 +15,28 @@ body {
padding: 0;
min-height: 100vh;
min-height: -webkit-fill-available;
/* Transparent background to allow video to show through */
background: transparent;
background: white; /* Explicit white fallback */
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Full-bleed video that extends into safe areas */
.full-bleed-video-container {
position: absolute;
/* Extend beyond viewport into safe areas using negative margins */
top: calc(env(safe-area-inset-top, 0px) * -1);
left: calc(env(safe-area-inset-left, 0px) * -1);
right: calc(env(safe-area-inset-right, 0px) * -1);
bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
width: calc(100% + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
background: white; /* White fallback when video doesn't load */
}
/* Safe area padding for content */
.safe-area-padding-top {
padding-top: env(safe-area-inset-top, 0px);
}
.safe-area-padding-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}