pan problem on iOS12 when embedding map in an iframe

[dnauroy]

Hi,

First of all thank you so much for developing datamaps. I'm beginning to discover it and it's a really powerful tool.

I'm experiencing some difficulties in embedding the page (containing the map) in an iframe (check this link : https://data.wort.lu/maps/mapboxgljs/202003_coronavirus/index_coronavirusapp.html).

On iOS 12, when trying to pan in the map, in fact I'm scrolling the whole window.

I've added touch-action: none to the #map container and it works pretty well on Android and iOS 13, but on iOS 12 it's definitely not working well.

It seems iOS Safari has limited support for touch-action controls. Would it be an idea to address them via JavaScript?

In order to pan and zoom in the map, I've added a d3.behavior.zoom(), attached to the map object: map.svg.call(zoom.on("zoom", redraw))

Has anybody a hint?

Thank you in advance for your help.

// edit : I found out, using preventDefault() for touchmove on a map div.
Dominique