dom-examples
dom-examples copied to clipboard
mdn
gesture example does not work
I tried this demo: https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html
on these two platforms:
- OSX Chrome
- IPhone webkit
a friend also tried it on:
- Android Firefox
and it didn't appear to work on any of these platforms. I haven't dug in any deeper, but thought you'd want to know.
FWIW, I can confirm that it works in Android 8.0 Chrome ...but it does not work in iPhone Safari (iOS 11.1.1)
Apparently, the touch-action CSS property in not widely supported.
More about browser compatibility at https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html
This entire page and example should be removed. It's completely the wrong way to implement pinch zoom gestures in 2021 - today you should just use the wheel event. Unfortunately it took me ages to figure that out because that misleading page is really high up in Google for "pinch zoom" searches. And the wheel page makes zero mention of pinch zooming or two finger scrolling.
I can also confirm that this example doesn't work on any combination of Mac OS and Debian laptops with touch-pads and any of the safari, firefox or chrome browsers. On MacOS the whole page zooms (without any pinch/zoom events being handled by the page itself) and on linux... nothing happens at all.
It does work on my fairphone2 (android 9, foss browser).
@Timmmm I don't agree that "wheel == pinch" :-)
I don't agree that "wheel == pinch"
Doesn't really matter what you think - pinch zoom gestures generate wheel events (with ctrl pressed).
I presume that it because Apple needed it to work with existing websites when they first shipped pinch-to-zoom, and that was the easiest way. To be fair it works well. It would just be nice if it was documented on MDN instead of the current broken example).
I don't agree that "wheel == pinch"
Doesn't really matter what you think - pinch zoom gestures generate wheel events (with ctrl pressed).
I just mentioned it for anyone who came here while trying to provide a consistent UX for their users.
It's the old hammers and nails problem. If all you have is a hammer, everything looks like a nail. In this case, the pinch gesture isn't supported so.... wheel! Sure, it works, but at the cost of losing other well known (and supported!) gestures.
Anyone who actually has a multi-touch device and is accustomed to dragging two fingers to pan in two dimensions and pinching to zoom, is forced to use a different set of gestures while browsing. So now, in some apps(!), dragging two fingers zooms and "how do I pan? click and drag? why?"... "because... hammers" :-|
Alternatively an app could use a slider or in/out buttons, or shift/ctrl/alt/meta-wheel to zoom while keeping the 2-dimensional wheel events for panning and click-drag for moving selected items. Then there's changing the orientation (rotation)... tracking two pointers would be easy... just not possible with today's technology... so once again, we need to come up with a workaround that the user can understand.
Which alternatives an app developer chooses is up to them and depends entirely on their use case.
PS: ctrl-pinch doesn't generate wheel events on any of my devices - the browser just zooms the entire page (mac) or does nothing (linux).
Anyone who actually has a multi-touch device and is accustomed to dragging two fingers to pan in two dimensions and pinching to zoom, is forced to use a different set of gestures while browsing.
I don't follow. Those gestures work the same while browsing.
I agree it would be nice if there was a more powerful API, e.g. to allow rotation, and to distinguish ctrl-pan from pinch-zoom. But the current system works very well for 99% of use cases.
PS: ctrl-pinch doesn't generate wheel events on any of my devices
I think you might have misunderstood. Pinch to zoom gestures create wheel events with the control key flag set.
Closing as stale, and because it was most likely resolved either by browsers now all supporting touch-action or via https://github.com/mdn/dom-examples/issues/155.
