Pinch zoom broken in Chrome v55.02883.91 on Mobile

[nsshunt]

Subject of the issue

Pinch zoom broken in Chrome v55.02883.91 on Mobile and Android System WebView v55.02883.91
This applies to android mobile devices using Chrome (browser) and Cordova apps using Android System WebView.

Your environment

• jquery.panzoom.min.js 3.2.2
• jquery-1.11.1.min.js (for my cordova apps) however the demo web site also does not work.
• Chrome broken (see version above). Still works using "Internet" as browser on Samsung phones.

Steps to reproduce

1. Get hold of a samsung galaxy S6 Edge + (or equivalent)
2. Upgrade Chrome and/or Android System WebView to v55 etc.
3. Load in the demo page
4. try and zoom in on the tiger - she broken mate!

Expected behaviour

On previous version of Chrome (right up until v54, worked perfectly, i.e. zoomed in!

Actual behaviour

What happens on v55 is all you get is the pan, not the zoom and the panned image sometimes 'jumps' between pinch fingers and creates a flashing effect as the image is flipped between your two fingers.

[claudiobadii]

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

[vrtual]

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.

[lorecioni]

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

[vrtual]

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

[wywfsgyu111111]

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.

[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.

[wywfsgyu111111]

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!

[nsshunt]

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!

[alandamatta]

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...

[pravid]

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

This works partially. Thanks!

[OmniCHI]

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.

[bodgybrothers]

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.

[ErkoKnoll]

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.

[pravid]

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

[JamesCatt]

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.

[Risingson]

thanks @JamesCatt will try your alternative.

@timmywil !?

[Risingson]

@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).

[alexiac4]

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.

[hshiozawa]

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.

[ksullivan2]

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