Can't pinch-to-zoom in iOS Safari 11.3

[andrewpomeroy]

mapbox-gl-js version: v0.44.1

Steps to Trigger Behavior

1. Visit https://www.mapbox.com/mapbox-gl-js/example/simple-map/ in iOS Safari (v11.3)
2. Try to pinch-to-zoom on the rendered map

Expected Behavior

Map zooms, with all features scaling accordingly

Actual Behavior

Zoom is applied to the entire page containing the map, so the map borders extend past the visible viewport, and feature rendering doesn't scale accordingly.

[richessler]

+1 I'm actually experiencing the same thing.

Built with http://alex3165.github.io/react-mapbox-gl/

Map works perfectly on desktop, however when attempting to make a mobile site responsive pinching causes entire page to zoom, generally triggering browser reloads or other functionality.

@andrewpomeroy I Do you have your meta tag set?

<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">

Looks like this is proving to be the right path. For met it's still not perfect, but it's helping.

[ethanzxlee]

I’m having the same issue too

[anandthakker]

This should be fixed in v0.44.2, available on npm and at https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js (I missed the update to https://www.mapbox.com/mapbox-gl-js/api/, so it's still showing 0.44.1 as the latest version -- will update shortly)

[mb12]

@anandthakker Is it possible to briefly explain what was the root cause of this and what fixed it?

[anandthakker]

@mb12 sure. The root cause is that webkit made document touch event listeners "passive" by default.
See WICG/interventions#18 for a fuller description of this "intervention" and some discussion about it.

The fix in #6248 (plus the fixup in #6450) works around this breaking change by detecting support for the passive option and, if it's present, using it to explicitly mark touch listeners as non-passive, so that they're allowed to preventDefault