touch-action

The 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.

#element {
  touch-action: pan-right pinch-zoom;
}

The 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 to none will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: touch-action: pan-x pan-y;.

See the Pen examples of touch-action by CSS-Tricks (@css-tricks) on CodePen.

Syntax

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Values

The touch-action property accepts the following values:

• auto: Allows the browser to handle all pan and zoom interactions.
• none: Disables browsers from handling all pan and zoom interactions. This opens up the ability to custom define those interactions in JavaScript.
• pan-x: Enables horizontal panning with a single finger interaction. It is shorthand for the pan-left and pan-right values, but can be used in combination with pan-y, pan-up, pan-down and pinch-zoom.
• pan-y Enables vertical panning with a single finger interaction. It is shorthand for the pan-up and pan-down values, but can be used in combination with pan-x, pan-left, pan-right and pinch-zoom.
• 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 pan- value.

Related

• pointer-events

Browser Support

Safari is the glaring omission to touch-action support. iOs Safari has limited support, only for the auto and manipulation values.

Additional Information

• 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.