Fix an iOS15 issue where Safari tab bar interrupts panning (#11084) (#11101)

* Fix an iOS15 issue where Safari tab bar interrupts panning (#11084) (#11089)

* fix an iOS15 issue where map stops when panning

* fix tests and lint

* Test drag pan handler does not end interaction on resize

* Move blur event reset into non-touch handlers (#11087)

* Move blur event reset into non-touch handlers

* Fix linter

* Fix/amend unit tests

* Flush task queue in rotate test

Co-authored-by: Ricky Reusser <ricky.reusser@mapbox.com>
Co-authored-by: Ricky Reusser <rreusser@users.noreply.github.com>

Co-authored-by: Vladimir Agafonkin <agafonkin@gmail.com>

* Removed getBoundingClientRect conflict for unit tests

* Added offsetHeight to replace getBoundingClientRect to fix unit tests

* add clientWidth and clientHeight to unit tests

* container -> map.getContainer()

* Replaced offsetWidth with clientWidth

* removing change difference in attribution and logo unit tests from v1.13.2

* Change size of container instead of canvas container to trigger resize in unit tests

* Added change in height to trigger resize

* fix to attribution.test.js

* Fixes logo.test.js to pass

* removed unneeded changes

Co-authored-by: Ricky Reusser <rreusser@users.noreply.github.com>
Co-authored-by: Vladimir Agafonkin <agafonkin@gmail.com>

Author: 3 people

src/ui/handler/box_zoom.js

@@ -142,6 +142,10 @@ class BoxZoomHandler {
         }
     }
 
+    blur() {
+        this.reset();
+    }
+
     reset() {
         this._active = false;
 

src/ui/handler/click_zoom.js

@@ -16,6 +16,10 @@ export default class ClickZoomHandler {
         this._active = false;
     }
 
+    blur() {
+        this.reset();
+    }
+
     dblclick(e: MouseEvent, point: Point) {
         e.preventDefault();
         return {

src/ui/handler/keyboard.js

@@ -41,6 +41,10 @@ class KeyboardHandler {
         this._rotationDisabled = false;
     }
 
+    blur() {
+        this.reset();
+    }
+
     reset() {
         this._active = false;
     }

src/ui/handler/mouse.js

@@ -31,6 +31,10 @@ class MouseHandler {
         this._clickTolerance = options.clickTolerance || 1;
     }
 
+    blur() {
+        this.reset();
+    }
+
     reset() {
         this._active = false;
         this._moved = false;

src/ui/handler/scroll_zoom.js

@@ -338,6 +338,10 @@ class ScrollZoomHandler {
         return easing;
     }
 
+    blur() {
+        this.reset();
+    }
+
     reset() {
         this._active = false;
     }

src/ui/handler_manager.js

@@ -291,11 +291,6 @@ class HandlerManager {
 
     handleEvent(e: InputEvent | RenderFrameEvent, eventName?: string) {
 
-        if (e.type === 'blur') {
-            this.stop(true);
-            return;
-        }
-
         this._updatingCamera = true;
         assert(e.timeStamp !== undefined);
 

src/ui/map.js

@@ -591,17 +591,17 @@ class Map extends Camera {
      * if (mapDiv.style.visibility === true) map.resize();
      */
     resize(eventData?: Object) {
-        const dimensions = this._containerDimensions();
-        const width = dimensions[0];
-        const height = dimensions[1];
+        const [width, height] = this._containerDimensions();
+
+        // do nothing if container remained the same size
+        if (width === this.transform.width && height === this.transform.height) return this;
 
         this._resizeCanvas(width, height);
         this.transform.resize(width, height);
         this.painter.resize(width, height);
 
         const fireMoving = !this._moving;
         if (fireMoving) {
-            this.stop();
             this.fire(new Event('movestart', eventData))
                 .fire(new Event('move', eventData));
         }

test/unit/ui/control/attribution.test.js

@@ -63,13 +63,15 @@ test('AttributionControl appears in compact mode if compact option is used', (t)
 test('AttributionControl appears in compact mode if container is less then 640 pixel wide', (t) => {
     const map = createMap(t);
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
+    Object.defineProperty(map.getContainer(), 'clientWidth', {value: 700, configurable: true});
     map.addControl(new AttributionControl());
 
     const container = map.getContainer();
 
     t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib:not(.mapboxgl-compact)').length, 1);
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
+    Object.defineProperty(map.getContainer(), 'clientWidth', {value: 600, configurable: true});
     map.resize();
 
     t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.mapboxgl-compact').length, 1);

test/unit/ui/control/logo.test.js

@@ -93,10 +93,12 @@ test('LogoControl appears in compact mode if container is less then 250 pixel wi
     const container = map.getContainer();
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 255, configurable: true});
+    Object.defineProperty(map.getContainer(), 'clientWidth', {value: 255, configurable: true});
     map.resize();
     t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo:not(.mapboxgl-compact)').length, 1);
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 245, configurable: true});
+    Object.defineProperty(map.getContainer(), 'clientWidth', {value: 245, configurable: true});
     map.resize();
     t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo.mapboxgl-compact').length, 1);
 

test/unit/ui/handler/drag_pan.test.js

@@ -150,13 +150,15 @@ test('DragPanHandler ends a mouse-triggered drag if the window blurs', (t) => {
     map._renderTaskQueue.run();
 
     simulate.blur(window);
+    map._renderTaskQueue.run();
+
     t.equal(dragend.callCount, 1);
 
     map.remove();
     t.end();
 });
 
-test('DragPanHandler ends a touch-triggered drag if the window blurs', (t) => {
+test('DragPanHandler does not end a touch-triggered drag if the window blurs', (t) => {
     const map = createMap(t);
     const target = map.getCanvas();
 
@@ -170,7 +172,40 @@ test('DragPanHandler ends a touch-triggered drag if the window blurs', (t) => {
     map._renderTaskQueue.run();
 
     simulate.blur(window);
+    map._renderTaskQueue.run();
+
+    t.equal(dragend.callCount, 0);
+
+    map.remove();
+    t.end();
+});
+
+test('DragPanHandler does not end a touch-triggered drag if the window resizes', (t) => {
+    const map = createMap(t);
+    const target = map.getCanvas();
+
+    const dragend = t.spy();
+    map.on('dragend', dragend);
+
+    const drag = t.spy();
+    map.on('drag', drag);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{target, clientX: 0, clientY: 0}]});
+    map._renderTaskQueue.run();
+
+    simulate.touchmove(map.getCanvas(), {touches: [{target, clientX: 10, clientY: 10}]});
+    map._renderTaskQueue.run();
+
+    map.resize();
+
+    simulate.touchmove(map.getCanvas(), {touches: [{target, clientX: 20, clientY: 10}]});
+    map._renderTaskQueue.run();
+
+    simulate.touchend(map.getCanvas());
+    map._renderTaskQueue.run();
+
     t.equal(dragend.callCount, 1);
+    t.equal(drag.callCount, 2);
 
     map.remove();
     t.end();