mnogueron/react-easy-panzoom

Glitchy zoom and pan on mobile devices

davwheat opened this issue · 5 comments

davwheat commented

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 commented

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 commented

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

It just prevents scrolling the whole page!

davwheat commented

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;
}
  • 👍3
mnogueron commented

@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 commented

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