Pinch Zoom does not play animation if resetting back to the original zoom level

[edkimmel]

How to reproduce

• Leaflet version I'm using: 1.2
• Browser (with version) I'm using: Chrome
• OS/Platform (with version) I'm using: Android (7.0)

Slightly pinch zoom the map. When you let go, the map will snap back to its original zoom level instead of animating back to it.

The map transform is not updated during pinch zooms. So while I'm pinching from zoom 16 to 16.3, the map's proxy's transform is still set as if the map was zoom 16.

When I let go and leaflet animates back to zoom 16, the following code catches the "no-op" and tries to handle it:

In _createAnimProxy:

// workaround for case when transform is the same and so transitionend event is not fired
if (transform === this._proxy.style[prop] && this._animatingZoom) {
  this._onZoomTransitionEnd();
}

If I remove that check, the animations play as expected. Since the following code is also trying to account for the lack of transitionend event, is it safe to remove the above code?

In _animateZoom:

// Work around webkit not firing 'transitionend', see https://github.com/Leaflet/Leaflet/issues/3689, 2693
setTimeout(bind(this._onZoomTransitionEnd, this), 250);

[cherniavskii]

Hi Edward, could you provide a link to minimal example reproducing this issue?

[edkimmel]

Pinch zooming (On mobile) on the map at http://leafletjs.com/ frequently causes the problem. It seems to happen more when zoomed in further (Not the max zoom bounce effect).

[cherniavskii]

I don't see any problems with pinch zoom.

(Chrome on laptop with touchscreen)

[edkimmel]

Android, mobile chrome. Seems to happen if you are slow to pick up your fingers:

https://user-images.githubusercontent.com/26493779/181134740-3b5e27f0-61c4-4c33-a5dd-9971c541aa8b.mp4