search

BetterTyped / react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
MIT License
1.54k stars 274 forks source link

Double clicking to zoom, in quick succession causes the element to pan randomly #408

Open Tom-Keeley opened 1 year ago

Tom-Keeley commented 1 year ago

Describe the bug When double clicking to zoom in, if done repeatedly and in slightly different places on the element it causes the element to pan to a random position.

I initially thought it may be an issue specific to the project I am working on but the bug is reproducible within the documentation page - I have attached a video demonstrating this.

https://github.com/prc5/react-zoom-pan-pinch/assets/55388271/a63f7ba9-8893-4608-945d-8143752a5162

I have noticed the issue occurs more consistently when using a trackpad rather than a mouse but that may be due to my machine, i have also noticed that occasionally it will pan to the same position.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-zoomed-out--zoomed-out
  2. Double click to zoom in in quick succession slightly changing where you are clicking each time
  3. After a random number of times the element will pan unexpectedly to a random position.

Expected behavior When double clicking irregardless of how fast the user is doing it, it should zoom in to where the user has double clicked. This may include some minor panning but it should not pan to a random position.

Desktop (please complete the following information):

Additional context This also occurs in the other examples on the documentation site not just the one shown in the video.

Neilxx commented 1 year ago

facing the same problem 😢 but it seems zoom in in either way (double click, trackpad gesture zoom in, mouse wheel zoom in ), then click (no need to be double click), could reproduce the behavior.

OS: MacOS Monterey Browser: Chrome

edwinvanderven commented 11 months ago

I noticed that this issue is only happening when the limitToBounds on the TransformWrapper is set to false.

SiavashAliyari commented 7 months ago

disable the velocity option on panning it works

diasmashikov commented 5 months ago

Facing the same problem. Anyone has solutions to this?

goldenice commented 2 months ago

Also facing the same problem. Indeed the disabling of velocity on panning seems to work, as does setting limitBounds to true. I can consistently reproduce after zooming in massively via trackpad, then leftclicking. Judging by the coordinates it seems to suddenly jump a massive distance in panning (from a few thousand pixels to almost 100k pixels transform). I cannot reproduce this using a mouse wheel on the same app/machine, only on trackpad.