April 2018
Photo by Scott Webb onĀ Unsplash
For a long time I have wondered how Google Maps and Figma have been able to support pinch-to-zoom multi-touch gestures from my trackpad on my Macbook, when thereās no special trackpad JavaScript events exposed.
So I started exploring this a few months ago and this weekend I stumbled upon this bug, 1052253āāāOS X: Pinch to zoom gesture should map to mousewheel with the control key, like Chrome, in the Mozilla bug tracker and that finally made things click.
Apparently Microsoft with IE10 was the pioneers here, as they enabled pinch-to-zoom gestures from multi-touch trackpadās to be surfaced as mousewheel
event with the ctrl
modifier set to true.
The Chrome team had a discussion about this back in January 2014, and the adaption landed in Chrome M35 as per documented in this bug. Mozilla followed up with parity and landed the support in Firefox 55.
As explained by Rick Byers in the this Chrome issue:
The spec has an example that says:
"The user's environment might be configured to associate vertical scrolling with rotation along the y-axis, horizontal scrolling with rotation along the x-axis, and zooming with rotation along the z-axis."
From this perspective it seems reasonable to generate deltaZ wheel events for trackpad pinch gestures. This would enable apps like google maps to respond nicely to pinch.
So that was a bit of the historic context. Today this means that we have a de-facto āhackā standard to detect pinch-to-zoom gestures from trackpads, which is supported in multiple browsers.
So how does it work?
You can detect a pinch-to-zoom gesture with this quite simple event handler listening for the wheel
event, where the e.deltaY
value represents your zoom/scale factor when the e.ctrlKey
is set.
Thatās it.
The browser support seems to be as following:
After the ctrl key modifer hacker landed there seem to have been a discussion on how this could formalized into a better API as per this dicussion on Twitter:
@Alecazam123 @grorgwork If we could agree on a standard gesture API, that would probably be better long term than my ctrl+wheel hack.
— Rick Byers (@RickByers) July 7, 2015
In March 2016 Apple has shipped new aGestureEvent
for Webkit that shipped as a part of Safari 9.1, and this new event model allow us to detect gesture rotation and much.
You can read more about GestureEvents
in the Apple documentation here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW23
Iāve put together a simple demo of a
wheel
event and gestureEvents
when in Webkit. The latter enables rotation of the element, which is quite cool:
Demo: https://multi-touch-trackpad-gesture.stackblitz.io/
Code: https://stackblitz.com/edit/multi-touch-trackpad-gesture
https://multi-touch-trackpad-gesture.stackblitz.io/
Another cool demo I found is using WebGL and the performance is even better: http://jsbin.com/fepuficudolo/3/edit?html,output
Today there doesn't seem to be a web standard for this, but thereās requests opened on the W3C UI Events specification here https://github.com/w3c/uievents/issues/31, and thereās a separate discussion on extending PointerEvents to expose raw Trackpad events here https://github.com/w3c/pointerevents/issues/206, so maybe one day weāll have a web standard for this. Personally I would expect PointerEvents as the place for this.
Hope that clarified a few things. At least it did for me.
/k