Skip to content

Commit 8422299

Browse files
estradinoclaude
andauthored
mobile: stop locking root scroll on drawer open (fixes stuck iOS toolbar gap) (#281)
Follow-up to #280. The page now scrolls correctly on navigation, but opening the drawer reintroduced the bottom black gap on iOS Safari, and it persisted after closing — the toolbar stopped retracting on scroll. Cause: #280's drawer-open scroll lock set `overflow: hidden` on html/body. On phones the document is the scroller, and toggling overflow on the ROOT scroller makes iOS Safari snap its toolbar back to the expanded state and leaves the viewport stuck. So the gap reappears when the drawer opens and sticks after it closes. Fix: remove the root overflow lock. It isn't needed for background containment — the drawer's `overscroll-behavior: contain` plus the overlay's `touch-action: none` keep touch scrolling out of the page without ever touching the root scroller, so the document stays scrollable and Safari's toolbar keeps retracting normally through open/close. Verified in WebKit: html/body overflow stays `visible` across the open->close cycle (it was flipping to hidden on open), the document remains scrollable afterward, and tap-on-overlay still closes the drawer. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 4e5663b commit 8422299

1 file changed

Lines changed: 6 additions & 5 deletions

File tree

public/redesign.css

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,12 @@ body.mobile-sidebar-toggle #mobile-left-sidebar.or-drawer { transform: translate
104104
#mobile-overlay { transition: opacity 0.25s ease; touch-action: none; }
105105
body.mobile-sidebar-toggle #mobile-overlay { opacity: 1 !important; pointer-events: auto !important; }
106106

107-
/* When the drawer is open, lock the page scroll behind it. On phones the document is
108-
the scroller (see the media query above), so lock the document itself — not .or-main
109-
— and overscroll-behavior:contain on the drawer keeps touch scrolling inside it. */
110-
html:has(body.mobile-sidebar-toggle),
111-
body.mobile-sidebar-toggle { overflow: hidden; }
107+
/* We deliberately do NOT lock the page scroll with `overflow:hidden` on html/body when
108+
the drawer opens. On phones the document is the scroller, and toggling overflow on the
109+
ROOT scroller makes iOS Safari snap its toolbar back to the expanded state and leaves a
110+
stuck black gap at the bottom that persists even after the drawer closes. Background
111+
containment is handled instead without touching the root scroller: the drawer's
112+
overscroll-behavior:contain (above) plus the overlay's touch-action:none (above). */
112113

113114
/* The header has a translucent background + backdrop blur. The dark #mobile-overlay
114115
sits behind it, so the blur sampled the overlay and turned the header grey when the

0 commit comments

Comments
 (0)