Browser pinch-zoom in IE/Edge breaks things about d3-drag HOT 5 CLOSED

We already set touch-action to none in both d3-drag and d3-zoom.

https://github.com/d3/d3-zoom/blob/1d0b81dbfb567add248f0346c112aaa74b4ed3ba/src/zoom.js#L72

Not really sure what else we can do here to help Edge, but I’d welcome a pull request if you determine how to fix this issue.

from d3-drag.

Concerning the touch-action issue I just figured out that it is not applied in IE11/Edge because of the default touchable function which makes sense since these browsers do not support touch events per default (in Edge it's can be enabled through a hidden flag). Now most the touch stuff (basically everything except for the pinch gesture) does still work in these browsers thanks to it being mapped to mouse events.

I didn't yet look into the other issue, I was looking into ways on how to support the pinch gesture first (d3/d3#1439 (comment)).

from d3-drag.

Concerning the original issue, I tracked it down to https://github.com/d3/d3-selection/blob/master/src/point.js, more specifically the following line:

point = point.matrixTransform(node.getScreenCTM().inverse());

node is refering to the outer <g>roup here, the one holding the transforms for d3.zoom.

(For what it's worth, pinch gesture triggered page zoom can be detected by checking document.documentElement.msContentZoomFactor.)

from d3-drag.

A possible workaround was outlined at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14429296/#comment-2 but as noted there we would also need to dynamically detect whether the issue exists (no idea how to do it ATM). Would a workaround like that be something which would in principle get included into d3.js or would it be too much of a compatibility layer for your taste, @mbostock?

from d3-drag.

This sounds like a browser bug, and as D3 is not a compatibility layer, we don’t generally workaround browser bugs. Apologies for the delayed response!

from d3-drag.