Mapbox-gl-js: Fix touch events in EDGE browser

[vmikeska]

Touch screen functionality (moving, resizing) is not working with EDGE.
-Win 10 + EDGE
-Win 10 mobile + EDGE
-Win 8.1 mobile + IE

[bhousel]

Cool, I'm getting a device to test this next week.

[mb12]

@mourner and @lucaswoj Is it possible to prioritize this or suggest a workaround to make at least panning work using touch on win 10 laptops (Edge browser only )? At the moment on Windows laptops, even simple panning does not work with touch. (Its okay if panning does not work on windows mobile.)

I am sure this should be blocking others also from switching entirely to mapbox vector base map.

[vmikeska]

My original complaint was about the Mapbox JS and it seems working now in 2.4

[mourner]

@mb12 we will get to this eventually, but if you need this urgently, we'll appreciate a pull request!

[mb12]

@mourner Thanks for the response. I have found a workaround that does not require any changes to GL JS. javascript lets you change prototype of any class that can be used to convert pointer events to touch events. Using the workaround for now. Will wait for the official fix.

[jfirebaugh]

Might be fixed with #4259.

[fmairesse]

A very simple fix to make the pan work:
body {
-ms-content-zooming: none;
overflow: hidden;
}

[sethb75]

There's a very large number of Surface Pro tablets out there ... many people use touch with Edge. I have customers complaining that touch events don't work for them.

[aptogo]

I can confirm that this is still a real issue with Win 10 + EDGE (41.16299.15.0) on Surface devices and touchscreen laptops. For example, https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/ - dragging pans the entire page, pinch&zoom zooms the entire page and tapping on an icon doesn't trigger a click event.

Adding 'touch-action: none' to the body element in this example allows you to pan the map by dragging but zooming and tapping to click do not produce any response.

Is this being actively looked into?

[jfirebaugh]

Touch events are disabled by default in Edge on touchscreen tablets such as the Surface.

https://github.com/MicrosoftEdge/WebAppsDocs/issues/39
https://github.com/MicrosoftEdge/Status/issues/336

[Shikakka]

Is there any fix on this? Or what files should I look at to create a fix?

[ryanhamley]

This is currently a limitation of the Edge browser. All touch events are disabled by default in Edge as discussed in the links here https://github.com/mapbox/mapbox-gl-js/issues/1928#issuecomment-372810721 Until these events are enabled in Edge, I don't think there's much we can do on our end.

[rbrundritt]

Edge uses pointer events instead of touch events. I believe Bing Maps supports pinch to zoom by using the pointer events. One option is to add a polyfill: https://github.com/CamHenlin/TouchPolyfill

[Shikakka]

Shouldn't it then be mentioned on the API or somewhere else? Just like @sethb75 said, a lot of people are using Windows tablets or touchscreen with IE11 or EDGE.

And maybe also mention a polyfill that can be used for now? The one @rbrundritt just mentioned breaks a lot of Angular 7 click functions. This one seems to be working better (at least for me) https://github.com/WebReflection/ie-touch

[rbrundritt]

Good news, the new version of Edge is available publicly for testing now here: https://www.microsoftedgeinsider.com I just tested and found that this issue is resolved in there. I believe this version of the browser is planned to be released to Windows later this year, at which point, not long after most users of Edge will likely be using that version. With this in mind, likely best to just wait for that version as likely not worth fixing something that will be irrelevant later this year.

I've done some testing and found this also resolves: #8116

[chloekraw]

I'm inferring from https://github.com/mapbox/mapbox-gl-js/issues/1928#issuecomment-481765066 that Edge now supports touch events and we can close this ticket. We can track the feature request to add support for pointer events in https://github.com/mapbox/mapbox-gl-js/issues/8021