934985c07c
All checks were successful
build-website / build (push) Successful in 2m14s
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>
42 lines
1.3 KiB
CSS
42 lines
1.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* iOS Safari Safe Area Support */
|
|
html {
|
|
/* Allow content to extend into safe areas */
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
background: white; /* Explicit white fallback */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
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);
|
|
} |