I found no information on this in the official documention of d3.zoom
but apparently pinch zooming of an area does work in Google Chrome and Mozilla Firefox but not Microsoft Internet Explorer or Edge. This can be already seen in one of the official demos: https://bl.ocks.org/mbostock/d1f7b58631e71fbf9c568345ee04a60e
When doing pinch zoom in IE11/Edge then instead page zoom will be triggered which can be disabled using -ms-content-zooming: none
(oddly enough not touch-action
) but is not what I want.
Am I correct in my assessment? Is there anything that can be done about it? Does maybe some polyfill exist?
There seems to be a long-standing error report on this (from 2013) on the d3 page:
https://github.com/d3/d3/issues/989
From the source code it looks like d3 uses the events touchstart.zoom
, touchmove.zoom
, touchend.zoom
and touchcancel.zoom
.
From what I can find on the internet, IE does not support those touch events at all, while Edge supports it only if the device doesn't have a keyboard. If it does, it needs to be enabled manually.
So you can't rely on touch events to be handled correctly by d3 in IE or Edge.
But there are quite a few polyfills that aim at correcting that problem. Since I don't have any touch-enabled Windows devices I can't test if any of these work correctly, but maybe try those: