Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Releasing one finger in pinch to zoom makes map to jump #9136

Closed
Nikodermus opened this issue Dec 20, 2019 · 6 comments
Closed

Releasing one finger in pinch to zoom makes map to jump #9136

Nikodermus opened this issue Dec 20, 2019 · 6 comments
Assignees
Labels

Comments

@Nikodermus
Copy link

Nikodermus commented Dec 20, 2019

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

draggin-panning-issue

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
Copy link

mapcarta commented Jan 8, 2020

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
Copy link

vakila commented Jan 8, 2020

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: #8889

@mapcarta
Copy link

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
Copy link

awulkan commented Mar 2, 2020

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

@asheemmamoowala
Copy link
Contributor

@awulkan @mapcarta This is moving ahead in #9365.

@ansis ansis mentioned this issue Apr 3, 2020
17 tasks
@ansis
Copy link
Contributor

ansis commented Apr 7, 2020

This has been fixed by #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.

@ansis ansis closed this as completed Apr 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants