Drawer: revert body position:fixed scroll lock.

guygrigsby · claude · guygrigsby · commit dc57bac77837 · 2026-05-17T00:25:02.000-06:00
The aggressive iOS variant (position: fixed + top offset) broke
inner scrolling — the chub results stopped scrolling at all. Back
to the simpler `overflow: hidden` body lock, which lets nested
overflow-y-auto regions scroll normally.

Leaves the bottom-nav-bouncing fix incomplete on iOS for now;
overscroll-behavior: contain on the results list is doing what it
can. Will revisit with a different angle if it keeps reproducing.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/web/src/components/Drawer.svelte b/web/src/components/Drawer.svelte
@@ -22,44 +22,17 @@
 
   let { open, onClose, ...rest }: Props = $props()
 
-  // iOS-strength body scroll lock while the drawer is open. The
-  // weaker `overflow: hidden` version still let iOS interpret touch-
-  // scroll attempts as "page wants to scroll", which collapses the
-  // address bar and re-flows the visual viewport — visibly bouncing
-  // the drawer's bottom tab bar as the chub results list reaches its
-  // scroll edge. Pinning body to `position: fixed` actually anchors
-  // the layout so the address bar stops collapsing/expanding on
-  // touch. We capture the current scrollY into `top: -<y>px` and
-  // restore both on close, so the user lands exactly where they
-  // started behind the drawer.
+  // Lock body scroll while the drawer is open. Prevents iOS Safari
+  // from rubber-banding the document when an inner scroll hits its
+  // edge. The earlier `position: fixed` variant broke inner scrolling
+  // entirely; `overflow: hidden` is the minimum that still lets the
+  // drawer's overflow-y-auto regions scroll normally.
   $effect(() => {
     if (typeof document === 'undefined') return
     if (!open) return
-    const body = document.body
-    const prev = {
-      position: body.style.position,
-      top: body.style.top,
-      left: body.style.left,
-      right: body.style.right,
-      width: body.style.width,
-      overflow: body.style.overflow,
-    }
-    const scrollY = window.scrollY
-    body.style.position = 'fixed'
-    body.style.top = `-${scrollY}px`
-    body.style.left = '0'
-    body.style.right = '0'
-    body.style.width = '100%'
-    body.style.overflow = 'hidden'
-    return () => {
-      body.style.position = prev.position
-      body.style.top = prev.top
-      body.style.left = prev.left
-      body.style.right = prev.right
-      body.style.width = prev.width
-      body.style.overflow = prev.overflow
-      window.scrollTo(0, scrollY)
-    }
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = prev }
   })
 </script>
 
