Mapbox-gl-js: Pinch & Zoom is off center on touch devices (v0.45.0)

[dave11mj]

mapbox-gl-js version: v0.45.0

browser:

• Chrome (Windows 10) with a touch monitor (Dell S2240T)
• Safari (iPhone 7)
• Safari (iPad)
• Any other touch enabled device (specially large screen displays)

Steps to Trigger Behavior

1. Place your fingers around the intended target to initiate zoom
2. Expand your fingers in a pinch & zooming gesture
3. Observe target moves away from the center of your fingers

Link to Demonstration

Demo Github Page Using v0.45.0
Demo Source

Note that in the demo above when you try to pinch and zoom on the "Capitol Hill Fountain"
it goes off center instead of remaining between the fingers.

Demo Github Page Using v0.42.2
Demo Source

Note that in the demo above when you try to pinch and zoom on the "Capitol Hill Fountain"
it stays between fingers. However, you are unable to pan with more than one finger.

Expected Behavior

Target should remain centered between the user's fingers without removing the ability to pan using more than one finger.

Actual Behavior

Target moves off center as the user zooms into it.

[andest01]

I am able to reproduce this error on my setup as well.

• Chrome Version 66.0.3359.181 (Official Build) (64-bit)
• (Windows 10)
• Dell P2418HT touch device

[averas]

This bug, along with #6668, feels like major blockers for any production upgrades from 0.44.2 and below.

[jliebrand]

This makes using pinch zoom pretty crappy on mobile. Any update on a potential fix here?

[jliebrand]

Friendly ping. Any plans for a fix?

[pakastin]

I have a simple solution waiting for a pull request which fixes this nicely 😎

[pakastin]

You can try it out here: https://beta.ilmailukartta.fi/
(https://beta.ilmailukartta.fi/js/mapbox-gl.js)

[jliebrand]

Awesome!

[ryanhamley]

closed by #7191

[jliebrand]

This is now much improved! Thanks! There's still a little glitch at the start of the pinch gesture... it seems to first move the map for a certain threshold of pixels, and then it computes the correct centre, jumps a little, and from there on in the pinch works fine.

Any thoughts on that initially little "jump"

[pakastin]

Yeah, it's basically because of this: https://github.com/mapbox/mapbox-gl-js/issues/7196

If you move the map with one finger and then add a second finger, multitouch event overlaps with the single touch event and creates the glitch..

[msbarry]

Also might be related to a fix I made for https://github.com/mapbox/mapbox-gl-js/issues/1832 - try setting setting clickTolerance option when you create the map to 0.

[Mindcraft1]

Hello
I'm encountering exactly this issue when using mapbox-gl as node_module import.

npm i mapbox-gl
import mapboxgl from 'mapbox-gl'

Updated package today for double check.

Does this require a new issue to be opened?

[pakastin]

You mean the original issue? How to reproduce?

[ryanhamley]

Hi @Mindcraft1 this was fixed as of v0.49.0 so if you have that installed, it should work as expected. You haven't really given enough information for us to help you out here. If you can confirm that you have the correct version installed and are still seeing a bug, you can open a new ticket with all the information in the template filled out and a minimal reproduction of the bug (in JSBin for example) so that we can diagnose what is going on.

[Mindcraft1]

Hi I opened #7397