fix: enable pinch-to-zoom on Android for map (#868) (#896)

Add `touch-action: none` to .map-container, .deckgl-map-wrapper, and
#deckgl-basemap so the browser does not intercept pinch/pan gestures on
Android. MapLibre (and deck.gl via MapboxOverlay) already handle these
touch interactions internally; the missing CSS property caused the
browser to claim the gestures for native page zoom instead.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nicolas Dos Santos
2026-03-03 03:26:04 -08:00
committed by GitHub
parent 6ec076c8d3
commit c48dede890

View File

@@ -3613,6 +3613,9 @@ body.playback-mode .status-dot {
position: relative;
overflow: hidden;
background: var(--map-bg);
/* Let the map library handle all touch gestures (pinch-zoom, pan)
instead of the browser intercepting them on mobile/Android */
touch-action: none;
}
.map-wrapper {
@@ -12634,6 +12637,9 @@ a.prediction-link:hover {
width: 100%;
height: 100%;
overflow: hidden;
/* Prevent browser from intercepting touch gestures (pinch-zoom, pan)
so MapLibre/deck.gl can handle them directly — fixes Android pinch-zoom */
touch-action: none;
}
#deckgl-basemap {
@@ -12642,6 +12648,9 @@ a.prediction-link:hover {
left: 0;
width: 100%;
height: 100%;
/* Let MapLibre handle all touch gestures (pinch-zoom, pan, rotate)
instead of the browser intercepting them for page zoom on Android */
touch-action: none;
}
#deckgl-overlay {