Fix an iOS15 issue where Safari tab bar interrupts panning

src/ui/map.js

@@ -696,9 +696,10 @@ 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);
 
@@ -707,7 +708,6 @@ class Map extends Camera {
 
         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

@@ -37,6 +37,7 @@ test('AttributionControl appears in the position specified by the position optio
 
 test('AttributionControl appears in compact mode if compact option is used', (t) => {
     const map = createMap(t);
+    Object.defineProperty(map.getContainer(), 'getBoundingClientRect', {value: () => ({height: 200, width: 700})});
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
 
     let attributionControl = new AttributionControl({
@@ -49,6 +50,7 @@ test('AttributionControl appears in compact mode if compact option is used', (t)
     t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.mapboxgl-compact').length, 1);
     map.removeControl(attributionControl);
 
+    Object.defineProperty(map.getContainer(), 'getBoundingClientRect', {value: () => ({height: 200, width: 600})});
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
     attributionControl = new AttributionControl({
         compact: false
@@ -61,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.getContainer(), 'getBoundingClientRect', {value: () => ({height: 200, width: 700})});
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {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.getContainer(), 'getBoundingClientRect', {value: () => ({height: 200, width: 600})});
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
     map.resize();
 

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

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

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

@@ -177,6 +177,37 @@ test('DragPanHandler ends a touch-triggered drag if the window blurs', (t) => {
     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();
+});
+
 test('DragPanHandler requests a new render frame after each mousemove event', (t) => {
     const map = createMap(t);
     const requestFrame = t.spy(map.handlers, '_requestFrame');

test/unit/ui/map.test.js

@@ -764,10 +764,42 @@ test('Map', (t) => {
             t.end();
         });
 
+        t.test('does nothing if container size is the same', (t) => {
+            const map = createMap(t);
+
+            t.spy(map.transform, 'resize');
+            t.spy(map.painter, 'resize');
+
+            map.resize();
+
+            t.notOk(map.transform.resize.called);
+            t.notOk(map.painter.resize.called);
+
+            t.end();
+        });
+
+        t.test('does not call stop on resize', (t) => {
+            const map = createMap(t);
+
+            Object.defineProperty(map.getContainer(), 'getBoundingClientRect',
+                {value: () => ({height: 250, width: 250})});
+
+            t.spy(map, 'stop');
+
+            map.resize();
+
+            t.notOk(map.stop.called);
+
+            t.end();
+        });
+
         t.test('fires movestart, move, resize, and moveend events', (t) => {
             const map = createMap(t),
                 events = [];
 
+            Object.defineProperty(map.getContainer(), 'getBoundingClientRect',
+                {value: () => ({height: 250, width: 250})});
+
             ['movestart', 'move', 'resize', 'moveend'].forEach((event) => {
                 map.on(event, (e) => {
                     events.push(e.type);