Mapbox-gl-js: Releasing one finger in pinch to zoom makes map to jump

[Nikodermus]

mapbox-gl-js version: 1.5.2

browser: All

Steps to Trigger Behavior

1. Place two finger in a mobile screen
2. Release the first placed finger
3. Map will move as pointer reference is changed and uses delta as movement.

Link to Demonstration

Here is a demo with visuals of the pointers added and how the change from the second to be the first (and only active) makes the map to move aggressively as it the user would have dragged it around

Expected Behavior

Releasing one finger should not have a effect on the map

Actual Behavior

It takes the finger release as a drag action

Workaround

This hack reduces the amount the times the issue is triggered

import { Map } from "mapbox-gl";

const pointers = new Set();
const mapboxElement = document.getElementById("#container");
const mapboxInstance = new Map({
  container: mapboxElement
});

// Add active pointers
mapboxElement.addEventListener(
  "pointerdown",
  ({ pointerType, pointerId }) => {
    if (pointerType === "touch") {
      pointers.add(pointerId);
    }
  },
  { capture: true }
);

// Remove and stop actions on release
mapboxElement.addEventListener(
  "pointerup",
  event => {
    const { pointerId, pointerType } = event;
    const [firstPointer] = Array.from(pointers);

    if (pointerType !== "touch") return;

    if (pointers.size === 2 && firstPointer === pointerId) {
      event.preventDefault();
      mapboxInstance.dragPan.disable();
    } else if (pointers.size === 1) {
      mapboxInstance.dragPan.enable();
    }

    pointers.delete(pointerId);
  },
  { capture: true }
);

[mapcarta]

Thanks for your attention. This surprising bug has been plaguing our site for some time now making the map unusable with touch. I do not imagine many people actually consistently release both fingers at the same exact time when pinch zooming. This bug is causing many or most people using touch to experience head-spinning unexpected high speed trips to a new destination and loss of their intended map position.

[vakila]

Hi @Nikodermus @mapcarta - thanks for using Mapbox & for reporting this! We are aware of this bug and are working on fixing it as part of a larger overhaul of gesture handling, including touch gestures. Stay tuned!

Related/possible duplicate: https://github.com/mapbox/mapbox-gl-js/issues/8889

[mapcarta]

I would like to please check up on the progress of the fix of this very critical bug. I'm surprised that this isn't being urgently worked on, as this is a severe product breaking error. The majority of devices use touch. Every one of these now experience a disaster when pinching except when both fingers are released at exactly the same time.

I agree that this is a duplicate of #8889, however the issue is better identified here.

[awulkan]

@vakila Hey, is there anywhere I can check the progress of this gesture handling overhaul?

[asheemmamoowala]

@awulkan @mapcarta This is moving ahead in https://github.com/mapbox/mapbox-gl-js/pull/9365.

[ansis]

This has been fixed by https://github.com/mapbox/mapbox-gl-js/pull/9365. If you have a chance to test and confirm, that would be great! The fix is in master and will be released in a beta release tomorrow.