From 96972a2bcafc78ef27f952aa9bbf037555a0ed24 Mon Sep 17 00:00:00 2001 From: matt Date: Sun, 21 Sep 2025 14:05:30 +0200 Subject: [PATCH] fix: implement GPT's iOS notch video extension solution - Added html/body reset styles (margin:0, padding:0, background:#000) - Removed ALL overflow:hidden from html, body, hero-voyage, and hero-video-container - Changed hero-voyage to use overflow:clip (prevents scrollbars while allowing extension) - Fixed video container positioning: - Changed from absolute to fixed positioning - Added top: calc(-1 * env(safe-area-inset-top)) to pull video into notch - Height: calc(100lvh + env(safe-area-inset-top)) with 100vh fallback - Set z-index: -1 to place behind all content - Updated mobile styles to match desktop implementation - Removed overflow-x:hidden from all parent elements This follows GPT's exact checklist for iOS notch video extension. --- apps/website/assets/css/main.css | 15 +++--- apps/website/assets/css/voyage-layout.css | 57 +++++++++++++---------- 2 files changed, 42 insertions(+), 30 deletions(-) diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css index 60843da..80aeab8 100644 --- a/apps/website/assets/css/main.css +++ b/apps/website/assets/css/main.css @@ -3,6 +3,13 @@ @tailwind components; @tailwind utilities; +/* Reset styles for iOS notch video extension */ +html, body { + margin: 0; + padding: 0; + background: #000; /* Black background for notch area */ +} + /* Smooth Scroll Behavior and iOS Overscroll Prevention */ html { scroll-behavior: smooth; @@ -11,8 +18,7 @@ html { /* Proper iOS viewport handling */ height: 100%; height: -webkit-fill-available; - /* Prevent horizontal scrolling */ - overflow-x: hidden !important; + /* Allow video to extend horizontally */ max-width: 100vw !important; } @@ -23,8 +29,7 @@ body { min-height: -webkit-fill-available; /* Prevent double-tap zoom on mobile */ touch-action: manipulation; - /* Prevent horizontal scrolling */ - overflow-x: hidden !important; + /* Allow video to extend horizontally */ max-width: 100vw !important; position: relative; } @@ -570,13 +575,11 @@ body { @media (max-width: 768px) { html { font-size: 16px; /* Keep base font size for readability */ - overflow-x: hidden !important; max-width: 100vw !important; } body { width: 100%; - overflow-x: hidden !important; max-width: 100vw !important; } diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css index c52b60d..e629008 100644 --- a/apps/website/assets/css/voyage-layout.css +++ b/apps/website/assets/css/voyage-layout.css @@ -200,7 +200,6 @@ body { font-family: var(--font-sans); color: var(--text-dark); background: var(--bg-light); - overflow-x: hidden !important; max-width: 100vw !important; position: relative; line-height: 1.6; @@ -210,7 +209,6 @@ body { /* Smooth Scrolling */ html { scroll-behavior: smooth; - overflow-x: hidden !important; max-width: 100vw !important; } @@ -410,13 +408,12 @@ html { /* Hero Section */ .hero-voyage { position: relative; - height: 100vh; /* Fallback for browsers that don't support newer units */ - height: -webkit-fill-available; /* iOS Safari - fills available space */ - height: 100dvh; /* Dynamic viewport height */ - overflow: hidden; + min-height: 100vh; /* Fallback for browsers that don't support newer units */ + min-height: -webkit-fill-available; /* iOS Safari - fills available space */ + min-height: 100dvh; /* Dynamic viewport height */ + overflow: clip; /* Prevents scrollbars while allowing content to extend */ overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; - overflow-x: hidden !important; max-width: 100vw !important; contain: layout; /* NO padding here - let container fill entire viewport */ @@ -424,12 +421,20 @@ html { } .hero-video-container { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 1; + position: fixed; + left: 0; + right: 0; + /* Pull the background up into the unsafe area */ + top: calc(-1 * env(safe-area-inset-top)); + height: calc(100lvh + env(safe-area-inset-top)); + z-index: -1; /* Behind everything */ +} + +/* Fallback for browsers without lvh support */ +@supports not (height: 100lvh) { + .hero-video-container { + height: calc(100vh + env(safe-area-inset-top)); + } } .hero-video, @@ -1676,30 +1681,35 @@ html { .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; /* Video will extend under notch - no padding-top here */ padding-bottom: env(safe-area-inset-bottom); - overflow-x: hidden !important; + overflow: clip; /* Allow video to extend while preventing scrollbars */ max-width: 100vw !important; } - /* Make video container fixed on mobile to fill entire viewport including notch */ + /* Video extends into notch area on mobile */ .hero-video-container { position: fixed !important; - inset: 0; + left: 0; + right: 0; + /* Pull the background up into the unsafe area */ + top: calc(-1 * env(safe-area-inset-top)); width: 100vw; - height: 100vh; - height: -webkit-fill-available; - height: 100dvh; - z-index: 0; + height: calc(100lvh + env(safe-area-inset-top)); + z-index: -1; /* Behind everything */ pointer-events: none; } + /* Fallback for browsers without lvh support */ + @supports not (height: 100lvh) { + .hero-video-container { + height: calc(100vh + env(safe-area-inset-top)); + } + } + .hero-content { /* Adjust padding to account for safe areas on all sides */ padding: clamp(1rem, 4vw, 2rem); @@ -1707,7 +1717,6 @@ html { padding-bottom: max(env(safe-area-inset-bottom, 0), clamp(1rem, 4vw, 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)); - overflow-x: hidden; width: 100%; display: flex; flex-direction: column;