search

mnogueron / react-easy-panzoom

Wrapper to enable pan and zoom features for any React component
MIT License
79 stars 17 forks source link

Glitchy zoom and pan on mobile devices #32

Open davwheat opened 5 years ago

davwheat commented 5 years ago

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 5 years ago

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 5 years ago

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

It just prevents scrolling the whole page!

davwheat commented 5 years ago

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 commented 5 years ago

@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 5 years ago

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