Mobile gesture conflicts and scroll bleed-through

• A one-finger drag on the map scrolls the whole page.
• A two-finger pinch enlarges the page rather than the map.
• With a fullscreen map popup open, dragging outside the map still scrolls the page underneath.

1. Check the map container's touch-action; a value such as pan-y lets the browser take the gesture first.
2. Check whether the map fills the entire viewport height, leaving nothing to scroll.
3. Distinguish page zoom from map zoom, since the first is the viewport meta tag and the second is gesture configuration.
4. Check whether body scroll is locked while an overlay is open, including position fixed for iOS.
5. Test on a real device instead of relying on the desktop emulator.

Set touch-action: none on the map container, keep width=device-width in the viewport and add user-scalable=no only on precision map pages. Lock the body with overflow hidden plus position fixed on iOS, restoring scrollTop on unlock, and cap map height near half the viewport so the page stays scrollable.

#map {
  touch-action: none;
}

<meta name="viewport"
      content="width=device-width, initial-scale=1,
               maximum-scale=1, user-scalable=no">

• Applying touch-action: none to the whole page, after which nothing scrolls at all.
• Locking body with overflow only: iOS Safari ignores it and the page keeps scrolling behind the overlay.