BetterTyped/react-zoom-pan-pinch

Double tap on phones not working properly.

penobit opened this issue · 3 comments

penobit commented

Describe the bug
When i double click on the component with PC/laptop, it will zoom in and out perfectly fine. But if i double tap on same component using a mobile phone (or mobile emulator in browser) it will not zoom in and out unless i hold the second tap.

To Reproduce
Steps to reproduce the behavior:

  1. add a component as a child of TransformWrapper and TransformComponent
  2. double tap on it using a phone or browser dev tools mobile emulator

Expected behavior
The component should scale/zoom on double tap (without having to hold the second tap).

Desktop (please complete the following information):

  • OS: Windows 10/11
  • Browser Microsoft Edge
  • Version latest

Smartphone (please complete the following information):

  • Device: iPhone X
  • OS: iOS 16
  • Browser Safari
  • Version latest
clintjansen commented

Having same issue, double tap (click) is working very buggy on mobile, especially with the new 'toggle' mode.
It seems the animation to zoom is ended prematurely

  • 👍2
Print3M commented

Exactly the same problem here. I've figured out some hack, just to make it work on mobile at all:

<TransformWrapper doubleClick={{ mode: "reset", animationTime: 1, animationType: "linear" }}>...</TransformWrapper>

animationTime: 1 does the job. I've added animationType: "linear" just in sake of performance maximization.

Pros: it seems pretty stable right now :)
Cons: it doesn't show nice and smooth animation anymore - the transition is instant :(

NOTE: animationTime: 0 seems to work buggy as well. No idea why.

  • 👍3
  • ❤️1