Safari has basic wheel-events and supports the proprietary gestureEvents which are explains belowĭetecting more advanced trackpad gestures with GesturesEvents in WebkitĪfter 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 If we could agree on a standard gesture API, that would probably be better long term than my ctrl+wheel hack.- Rick Byers July 7, 2015.Edge: ✅ Unless you are using a “precision-touchpad”.The browser support seems to be as following: 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. Detecting pinch-to-zoom on your trackpad with JavaScript 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 that was a bit of the historic context. This would enable apps like google maps to respond nicely to pinch. "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."įrom this perspective it seems reasonable to generate deltaZ wheel events for trackpad pinch gestures. Mozilla followed up with parity and landed the support in Firefox 55.Īs explained by Rick Byers in the this Chrome issue: The spec has an example that says: 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. 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.Īpparently Microsoft with IE10 was the pioneers here, as they enabled pinch-to-zoom gestures from multi-touch trackpad’s to be surfaced as mousewheelevent with the ctrlmodifier set to true. 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.