📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣
touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used
pointer-events property used to control mouse interactions.
touch-action: pan-right pinch-zoom;
touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen,
touch-action will come in handy.
The most obvious example of this is an interactive map element. If you’ve ever viewed a map not designed to work with touch devices, you’ve probably tried to pinch and zoom only to find the browser magnifying the element, but not actually zooming the actual map.
By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting
touch-action: pan-x pan-y;.
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
touch-action property accepts the following values:
auto: Allows the browser to handle all pan and zoom interactions.
pan-x: Enables horizontal panning with a single finger interaction. It is shorthand for the
pan-rightvalues, but can be used in combination with
pan-yEnables vertical panning with a single finger interaction. It is shorthand for the
pan-downvalues, but can be used in combination with
manipulation: Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of
pan-x pan-y pinch-zoom.
pan-left(Experimental): Enables a single finger interaction when a user’s finger moves to the right, which pans toward the left.
pan-right(Experimental): Enables a single finger interaction when a user’s finger moves to the left, which pans toward the right.
pan-down(Experimental): Enables a single finger interaction when a user’s finger moves up, which pans downward.
pan-up(Experimental): Enables a single finger interaction when a user’s finger moves down, which pans upward.
pinch-zoom: Enables multi-finger interactions and can be combined with any other
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
Safari is the glaring omission to touch-action support. iOs Safari has limited support, only for the
- Pointer Events Level 2 Specification – The spec is currently in Candidate Recommendation but is intended to move to Proposed Recommendation early 2019, as of this writing. The intent is that the document will become an official W3C Recommendation.
- MDN Documentation
- Touch-action pinch-zoom CSS property Sample – Google Chrome’s demo of its implementation.
- WebKit Bugzilla Ticket #133112 – Open ticket to propose Safari support. Add your vote to bump it up.