Touch-based zooming doesn't work properly in Firefox Nightly or Firefox for Android

Describe the bug When use a two-finger pinch-zoom gesture via a touchscreen in Firefox, zooming sometimes doesn’t work quite right and does a double-tap zoom in effect instead.

To Reproduce Steps to reproduce the behavior:

1. Go to https://openlayers.org/en/latest/examples/zoom-constrained.html in Firefox for Android or in Firefox Nightly on a desktop platform.
2. Put two fingers down simultaneously on the screen and pinch-zoom out
3. Observe that instead of pinch-zooming out, a double-tap pinch effect occurs instead.

Expected behavior Instead of a double-tap pinch in, the zoom should follow the gesture done by the fingers.

Additional context I’m a Firefox/Gecko platform developer investigating https://bugzilla.mozilla.org/show_bug.cgi?id=1663731 which was a specific instance of this bug on the lightpollutionmap.info website which uses OpenLayers. However the problem is reproducible even on the hosted OL example sites (e.g. the zoom constrained example which I linked above). This seems like perhaps a case of differing expectations between the events Firefox is sending and what OpenLayers is expecting. If it turns out to be a Firefox bug I’m happy to help get a fix landed on that side.

Note that in order for this bug to reproduce, the apz.allow_zooming pref must be enabled in Firefox. This is the default configuration in Firefox for Android and also on desktop Firefox Nightly builds (support on desktop is not on the release channel yet). The pointer events code must also be enabled (which is the case by default in all Firefox release versions). What seems to be happening, per investigation on https://bugzilla.mozilla.org/show_bug.cgi?id=1663731 is that when the second finger goes down, Firefox detects that it can do a pinch-zoom using the two finger gesture, and so dispatches a pointercancel to the content. This somehow triggers the double-tap-zoom-in effect. The reason Firefox detects it can do a pinch-zoom is because there is no touch-action property that disallows it, and because the pref apz.allow_zooming=true enables the pinch zooming codepaths in FIrefox.

The issue can be resolved by setting a touch-action: none or touch-action: pan-x pan-y property on the ol-viewport element, but from a cursory grep through the changelog it looks like that used to be the case and was removed, so obviously there’s some other mechanism that is intended to handle this scenario that may not be working in Firefox.

[staktrace]

Not quite, since (a) I don’t think you’d even get a pointermove event in this scenario and (b) cancelling pointermove doesn’t have the same effect as cancelling touchmove - cancelling pointermove only prevents some mouse event things and wouldn’t prevent browser-based pinch zooming.

But the good news is I dug into the event sequence above a bit more and found a possible fix in Firefox so that we send the touchmove before generating the pointercancel. In my testing so far that seems to resolve the problem, but I need to test a bit more. I believe it will bring our behaviour more in line with Chrome which will probably help webcompat in general, so I’ll pursue that approach first. I’ll post back on this issue once I figure that out one way or another.

[ahocevar]

Thanks, @staktrace!