d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
507 stars 143 forks source link

Zoom issue with touchstarted event #72

Closed dmacg closed 7 years ago

dmacg commented 7 years ago

On iPhone 7, iOS 10, with both the mobile Chrome and Safari browsers, the zoom functionality will fail if the two pinch-zoom touches happen very close to the same time. This creates a usability issue, as normally when users pinch-zoom, their fingers do in fact hit the screen at nearly the same time.

Not all devices are affected. I was able to test a Windows 7 touch device, and I was not able to get it to exhibit the same behaviour.

On the iPhone, the issue is with the changedTouches and touches collections on the touchstarted event. When the issue occurs on the iPhone:

  1. Two touch events are received as expected, one for each finger.
  2. Also, as expected, each event has a single element in changedTouches
  3. However, both events have two elements in touches. (On the Windows device, behaviour differs in that the first event has only one element in touches.)

With the first event having two elements in touches on the iPhone, the zoom fails due to the if statement here (added in #17), as touches is of length 2 and changedTouches is of length 1, preventing the gesture start from being called:

if (event.touches.length === n) {
  touchstarting = setTimeout(function() { touchstarting = null; }, touchDelay);
  interrupt(this);
  g.start();
}

I tested commenting out this if condition, and confirmed that the iPhone started working again as expected. However, I don't know if removing this will cause any other issues. (I did test the double-tap to zoom with this line commented out, and it continued to work fine.)

Note that this may apply to other devices and versions as well, but I'm limited in what I can test. I did test a Windows 7 touch computer, and was not able to reproduce the issue (the first received touchstarted event always had a single touch value).

dmacg commented 7 years ago

To clarify... the issue is with the two initial touches that should start the zoom. When the zoom start event is missed, moving one's fingers apart and together doesn't do anything.

mbostock commented 7 years ago

Please test and review #74. If it works, I will merge and push a patch release. Thank you!

dmacg commented 7 years ago

Tested #74 on iPhone 7, both the mobile Safari and Chrome browsers, and the fix worked perfectly!

mbostock commented 7 years ago

Great. Thank you!