Workaround webkit disrespecting e.preventDefault()

https://bugs.webkit.org/show_bug.cgi?id=182521
mapbox · Apr 3, 2018 · ae84dec · ae84dec
1 parent 11feb3b
commit ae84dec
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/debug/mobile_scroll.html b/debug/mobile_scroll.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body { height: 200vh; }
+        #map { height: 50vh; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
+
+</script>
+</body>
+</html>
diff --git a/src/ui/bind_handlers.js b/src/ui/bind_handlers.js
@@ -10,6 +10,10 @@ import dragPan from './handler/drag_pan';
 import keyboard from './handler/keyboard';
 import doubleClickZoom from './handler/dblclick_zoom';
 import touchZoomRotate from './handler/touch_zoom_rotate';
+import window from '../util/window';
+
+const iOS = !!window.navigator.platform &&
+    /iPad|iPhone|iPod/.test(window.navigator.platform); // https://stackoverflow.com/a/9039885
 
 const handlers = {
     scrollZoom,
@@ -39,8 +43,13 @@ export default function bindHandlers(map: Map, options: {}) {
     DOM.addEventListener(el, 'mousemove', onMouseMove);
     DOM.addEventListener(el, 'mouseover', onMouseOver);
     DOM.addEventListener(el, 'touchstart', onTouchStart, {passive: false});
-    DOM.addEventListener(el, 'touchmove', onTouchMove, {passive: true}); // `passive: true` because onTouchMove only sends a map event.
-    DOM.addEventListener(el, 'touchend', onTouchEnd);                    // The real action is in DragPanHandler and TouchZoomRotateHandler.
+    // Bind touchstart with passive: true because onTouchStart only fires a map event
+    DOM.addEventListener(el, 'touchstart', onTouchStart, {passive: true});
+    // Bind touchmove with passive: false on iOS because, even though
+    // onTouchMove only fires a map event, binding with passive: true causes
+    // iOS not to respect e.preventDefault() in _other_ handlers, even if they
+    // are non-passive.  https://bugs.webkit.org/show_bug.cgi?id=182521
+    DOM.addEventListener(el, 'touchmove', onTouchMove, {passive: !iOS});
     DOM.addEventListener(el, 'touchcancel', onTouchCancel);
     DOM.addEventListener(el, 'click', onClick);
     DOM.addEventListener(el, 'dblclick', onDblClick);