Ionic preventDefault() effecting D3 zooming and panning

Ionic Framework ionic-v3
1

I have a chart that is zooming and panning perfectly in Chrome. No erros or warnings. When I deploy that same exact chart with Ionic Framework, the zooming and panning are very slow and choppy. I also get this error:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Chrome Dev-Tools points to the vendor.js file as being the issue. The following line exports.event.preventDefault(); being the cause of the warning.

var noevent$2 = function() {
  exports.event.preventDefault();
  exports.event.stopImmediatePropagation();
};

Has anyone had an issue with this? I’ve also considered that my device may not have as much rendering power, but I want to cancel out this as being an option for the choppy behavior.

2

@Codekhalifah did you ever find a solution to this? I’m experiencing the same problem. I’ve been searching for an answer and was hopeful that this fix might be it:

I’ve tried using the data-tap-disabled tag but haven’t had any success.

EDIT: I’m using Ionic 2 in which data-tap-disabled is apparently not used. So I’m completely stumped.

3

What is exactly happening in your graph? It ended up being a bug in D3. Maybe I can help. I found a work around for my cases.

4

Thanks for responding, I’ve just come back to look at this actually. So, I’m using zoom just to scroll or pan my chart horizontally. On zoom I’m calling:

this.svg.attr("transform", "translate(" + d3.event.transform.x + ",0)");

When deployed to an android device it appears to do exactly what you described - very choppy and difficult to control. As in your case, Chrome dev tools is pointing to the same place in the vendor.js file with the warning:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

On a device with an older version of android (4) after the first attempt to scroll it gets stuck completely. I’m not even sure that warning has anything to do with the issue. What was your work around?

5

Ok, not sure if this is similar to your problem, but I found this post:

The solution here fixed it for me on the newer device I’m using. Still get issues on the older one but I’ll look into that separately. Thanks again for responding.