I am working on a procedurally generated map displayed through WebGL. The users can move using keyboard keys or with panning (useful on mobile but this works with a mouse too). They can zoom with their mouse wheel, unfortunately this doesn't work on mobile. On mobile I would like to allow them to zoom by "pinching". Currently, on safari ios, it performs a "native" zoom which is a bit buggy, and if you unzoom, it shows all your safari opened windows.
How could I disable these "native pinch zoom effects", and detect pinch events to zoom my map manually?
I tried using ontouchmove events but it is not easy to debug because I can't trigger that event on my computer, and I can't open the debug console to show my console.logs on my mobile.
Asked
Active
Viewed 260 times
0
Th0rgal
- 703
- 8
- 27
1 Answers
0
I am currently working on a similar issue. Will post a full answer when I have it.
However, I can already answer part of your question related to disabling "native pinch zoom effects".
According to this thread: Pointer-events: none doesn't work on mobile
you should be using touch-action: none; on the dom element where pinching happens.
Digital Dom
- 412
- 5
- 12
-
1Hey thank you, here is the code I ended up using if this can help you: https://github.com/Th0rgal/eykar.org – Th0rgal Nov 24 '22 at 18:14