fix double tap zoom on iOS 13

[ansis]

fix #9756

iOS 13 does not fire the second touchstart/end events in a double tap if the touchstart listener is non-passive. This fix makes it passive.

Calling preventDefault() allows the second event to be fired but suppresses other events like click.

touchmove needs to remain non-passive so that it can be used to prevent touches from scrolling or scaling the page on some versions of iOS Safari.

---

This fix does NOT work if a parent of the canvas (including the window/document/body) has a non-passive touchstart listener that doesn't call preventDefault(). I don't know of a fix for this that doesn't suppress all click dom events as well.

---

Launch Checklist

• briefly describe the changes in this PR
• write tests for all new functionality
• manually test the debug page
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Fix zooming with a double tap on iOS SafarI 13.</changelog>

I have done initial testing on iOS safari v12 and v13 but these needs to be tested more thoroughly on other touch devices.

[ansis]

Note: changing the listener to passive means that this won't prevent a click event from being fired anymore:

map.on('touchstart', e => e.originalEvent.preventDefault());

This might be considered a breaking change but:

• it was never explicitly supported
• it hasn't always been supported

[ryanhamley]

I tested this in iOS 13 Chrome and Safari and both worked as expected while 1.10.1 did not. I'd approve this but I think the fact that map.on('touchstart', e => e.originalEvent.preventDefault()); no longer works may deserve some discussion. It's not officially supported but preventing the original event seems to be a fairly common use case and we do point it out as a possible solution. Vlad did so on a ticket today #9755 (comment) albeit for touchmove. It also seems weird that this workaround would be available for every event except for touchstart.

[ansis]

I'd approve this but I think the fact that map.on('touchstart', e => e.originalEvent.preventDefault()); no longer works may deserve some discussion. It's not officially supported but preventing the original event seems to be a fairly common use case and we do point it out as a possible solution. Vlad did so on a ticket today #9755 (comment) albeit for touchmove. It also seems weird that this workaround would be available for every event except for touchstart.

The linked example uses stopPropagation() which will continue working the same way. The only thing preventDefault() on touchstart does in this case is prevent the relevant mouse events from firing. While someone may be relying on this behavior I think it's fairly unlikely.

I see no other way of working around this browser bug