2

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?

phk
  • 2,002
  • 1
  • 29
  • 54

1 Answers1

1

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:

Dakkaron
  • 5,930
  • 2
  • 36
  • 51
  • Pointer events seems to be the only way to go (see also https://github.com/d3/d3/issues/1439 including the last comments) but sadly there has no more work on implementing it from d3's side (https://github.com/d3/d3/pull/2403), it could probably be implemented like at https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html – phk Oct 22 '17 at 18:20