Panzoom: Pinch zoom broken in Chrome v55.02883.91 on Mobile

Thanks to report this issue. In one moment my app stop working on zoom and i don't know why.

My app broke too. Weird behavior on newly updated chrome (drag events seem to scroll the window and pinch events are... bizarre). Other device with non-updated chrome working fine. Updated chrome last night and it broke too.

Thanks for opening this issue.
My app stops working also on Chrome desktop for this reason.

Solution - add
touch-action: none;
to the css of your panzoom container and the browser will not perform its own touch events for that component.

It's a new thing: https://developers.google.com/web/updates/2016/10/pointer-events

Solution - add
touch-action: none;
to the css of your panzoom container and the browser will not perform its own touch events for that component.

It's a new thing: https://developers.google.com/web/updates/2016/10/pointer-events

Not working.

Had a quick hack in the code and commenting out line 1164:

this.panning = true;
allows pinch-zoom again for me (and doesn't affect panning). I can't see where this.panning gets set to false except on initialisation... YMMV.

Had a quick hack in the code and commenting out line 1164:
this.panning = true;
allows pinch-zoom again for me (and doesn't affect panning). I can't see where this.panning gets set to false except on initialisation... YMMV.

Thank you, works for me!

Had a quick hack in the code and commenting out line 1164:
this.panning = true;

Womp there it is.....

This 'hack' does the trick! Now works on android 55

Re-tested on iOS 10.2, Android 53 - still working as before!

Thanks vrtual!

Had a quick hack in the code and commenting out line 1164:
this.panning = true;
allows pinch-zoom again for me (and doesn't affect panning). I can't see where this.panning gets set to >false except on initialisation... YMMV.

Works fine for me... thanks man
I'm doing my own zoom function, but this saves me for now... thank you

Tested on android google webview 2016 dec 14 update...

Had a quick hack in the code and commenting out line 1164:
this.panning = true;

This works partially. Thanks!

I've got partial success on commenting out that line, it now zooms from the top-left instead of the interaction location, but that's a huge improvement.

It appears the latest chrome has changed where the pageX and pageY reference sits in the Event.
Up until that chrome change, all browsers had it in event.pageX....
Now it sits in event.originalEvent.pageX...

I'm part way through going over the panzoom code. To get it working on chrome using mouse events change these lines:
line 1191:1192
Change from:
startPageX = event.pageX; startPageY = event.pageY;
to:
if (typeof event.pageX === 'undefined'){ startPageX = event.originalEvent.pageX; startPageY = event.originalEvent.pageY; }else{ startPageX = event.pageX; startPageY = event.pageY; }
at Line 1232 add:
if (typeof coords.pageX === 'undefined'){ coords['pageX'] = coords.originalEvent.pageX; coords['pageY'] = coords.originalEvent.pageY; }

More to come for the touch events as I go through it.

Commenting out "this.panning = true;" fixes it but it is not that smooth that way anymore and on older devices the zooming becomes quite laggy. I assume commenting it out uses much more CPU power and thus older devices cannot keep up.

Have you tried updating to new version (3.2.2) and comment out the line given?

I can confirm that this bug still exists (and that the fix works) in v3.2.2 and Chrome 56.

I'm not 100% sure, but here's what I think the problem is:
That variable (this.panning) seems to be for the purpose of preventing more than one instance of the _startMove function from being fired simultaneously. It's supposed to be reset to false on the endEvent event (line 1249), but I guess this isn't working properly (I haven't delved deeply enough to find out why). This may be why ThorConzales found the fix causes reduced performance.

Alternate fix: I've found that adding this.panning = false; at the end of the _startMove function (after line 1255) also resolves this issue. I haven't tested on older devices so I can't confirm if this helps with the performance loss, but if someone else could I'd appreciate it.

thanks @JamesCatt will try your alternative.

@timmywil !?

@JamesCatt the alternative fix did not work for me and zoom was broken again (reported by a user since i do not have a device to test myself).

Commenting line 1164(this.panning = true) is not working for me. I cheated in line 1143 that change moveEvent = 'pointermove' tomoveEvent = 'touchmove', then it works, I am not sure if it will cause any other problems.

I have found a hack solving this problem.

We should set options.which to -1 on initialization.

$("a.panzoom-elements").panzoom({
  which: -1,
});

__WARNING__
This hack works for only a touch device. Maybe this doesn't work for a mouse.

@JamesCatt's alternative did not work for me. @hshiozawa's hack does, at least on a Pixel, running Android 7.1.2