Glitchy zoom and pan on mobile devices

[davwheat]

Video attached.

Panning often scrolls up and down the page instead of panning.

Zooming is very laggy, random or doesn't work at all.

https://puu.sh/ED3Ps/d38a0c1a8d.mp4

[n1ru4l]

Even worse in iPhone devices.

You will have to hijack the touch events:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.addEventListener(
    "touchstart",
    ev => {
      ev.preventDefault();
    },
    { passive: false }
  );
}

[davwheat]

The only issue is that it doesn't solve the issue.

It just prevents scrolling the whole page!

[davwheat]

I mainly solved this by adding a class to the <PanZoom ... /> element with these styles. This has prevented scrolling and significantly improved performance! I would highly recommend including info about this in the documentation.

.panZoom,
.panZoom * {
  touch-action: none;
}

[mnogueron]

@davwheat since now I haven't focused that much on the mobile side of this library. What you are saying is relevant and will consider including it in a new version.

[n1ru4l]

The only issue is that it doesn't solve the issue.

It just prevents scrolling the whole page!

You have to only apply it when scrolling is in progress (for iOS)... 🙂