Browser pinch-zoom in IE/Edge breaks things
Herst opened this issue · comments
I have a page where I am using d3.drag and since the pinch gesture apparently does not trigger a zooming through d3 in IE/Edge the browser will some sort-of page zoom instead (I am saying sort-of because it seems to be different from the one through e.g. Ctrl++/-). If zoomed this way certain d3.drag related things on my stop working.
To reproduce the problem:
- Using Internet Explorer or Microsoft Edge go to https://bl.ocks.org/Herst/raw/093ff9962405dd564ef58ad8af9544d0/
- Drag around the handles in the corners to resize the rectangle.
- Pinch-zoom the page.
- Again try to resize. You will see that it fails (no matter whether using touch or the mouse).
Works in Google Chrome and Mozilla Firefox.
BTW, by adding touch-action to your d3.drag demos you could improve the experience on IE/Edge in general because currently a long touch brings up the selection frame which prevents dragging.
We already set touch-action to none in both d3-drag and d3-zoom.
Line 46 in ac20829
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.
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)).
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.)
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?
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!