React-map-gl: Can't scroll on mobile devices when scrolling on map

[dekkofilms]

Facing an issue where on a mobile device if I am scrolling down the page, and I start the scroll touch on the map, it won't let me scroll anymore. Even with all the capture events disabled. I recreated the problem in a sandbox environment: https://codesandbox.io/s/rx0r2y7yo

If you go to the browser with that code, and in the chrome dev tools simulate a mobile device, and try to scroll down the page, starting the touch on the map itself.

Any insight would be great! Thanks.

[Pessimistress]

capture* props only apply to overlay components and not the map component.

My first instinct was that you also need to disable dragRotate to disable the gesture altogether, but that doesn't seem to do the trick.

Under the hood we use hammer.js to handle gestures. Somewhere in the implementation it is conflicting with the browser's default touch actions. I will investigate.

[dekkofilms]

Ah, gotcha.

Thanks @Pessimistress ... I am also looking into it as well but look forward to hearing your response.

[dekkofilms]

Any updates on this @Pessimistress? I haven't had the chance to really dive into it, but if there is any further knowledge transfer on this particular issue in debugging it ... that would be greatly appreciated! Thanks.

[cosmosof]

+1

[aendrew]

FWIW, it might be related to setting touch-action: none; on the parent element. I find I can scroll fine while still being able to do things like pinch zoom if I set touch-action: pan-y on the outer map div.

A more official workaround would be quite welcome, though!

[Pessimistress]

@aendrew Thanks for the tip. I'll get something out this week.

[Pessimistress]

Published 3.2.9

Use

<MapGL ... dragPan={false} touchAction="pan-y" />

to enable vertical scroll on mobile.

See updated documentation

[dekkofilms]

Thanks @Pessimistress!