On mobile, pan&zoom is very hard

[alcalyn]

Hi, I've seen that a lot of work has been made to provide mobile support (https://github.com/chrvadala/react-svg-pan-zoom/search?q=mobile&type=Commits&utf8=%E2%9C%93)

I'm using this component on this application: https://alcalyn.github.io/openhex/

It works well on desktop, but when trying on mobile, it's very hard:

• after zooming, it's still zooming in and out when trying to pan, like if I still have a finger on screen
• sometimes, I can't interact with svg items (I can't take units on the hex grid or select my blue kingdoms)
• when I zoom in, and zoom in again, the hex grid becomes too bigger

It happens often, so I don't know if I missed a step. Here is my App.js.

And here is a qrcode to reproduce the bug on mobile: https://duckduckgo.com/?q=qr+code+https%3A%2F%2Falcalyn.github.io%2Fopenhex%2F&t=canonical&ia=answer

[chrvadala]

Are you able to reproduce the same bug here? https://jsfiddle.net/chrvadala/f67qyfsd/ To start a good debugging I need to isolate the wrong behaviour from your app.

[alcalyn]

Yep, I have exactly the same bugs I listed. Tested on the fullscreen version: https://jsfiddle.net/chrvadala/f67qyfsd/embedded/result/

On android, firefox klar.

Here is the qrcode: https://duckduckgo.com/?q=qrcode+https%3A%2F%2Fjsfiddle.net%2Fchrvadala%2Ff67qyfsd%2Fembedded%2Fresult%2F&t=h_&ia=answer

[chrvadala]

Hi, I tested it both on Firefox klar and chrome, but I didn't find any trouble. I tested it on a nexus 5x. I was wondering if there could be something related with the hardware.

[alcalyn]

Ok I'll test it on other mobiles. I have these troubles on a htc u play.

[chrvadala]

thanks lmk ;)

[alcalyn]

Well pan&zoom works better on Firefox, not Firefox Klar. (But I still cannot click on svg elements.)