The CSS touch-action Property

Overview

The touch-action property regulates the browser's default behaviors, such as panning(scrolling) or zooming, in response to touch inputs on an element's interactive area. By determining how touch interactions are handled, it offers developers a way to preemptively shape an element's response before any JavaScript event listeners are involved.

In other words, you can selectively disable certain touch behaviors if they're not necessary for your application.

Note: Elements without inherent dimensions, such as inline spans, can still utilize the touch-action property by altering their display property to a format that supports width and height, like block.

Examples and Usage

In the following examples, we demonstrate how different values of the touch-action property affect the touch interactions on an element. Bear in mind that the touch area styling in a real-world application would differ, and these are hypothetical scenarios to illustrate the behavior.

Imagine a touch area styled with rules such as width, height, and other properties to define its appearance. In these examples, we use the following CSS classes to exhibit the effects of the touch-action property:

/* Allows browser to determine the suitable touch behavior */
.auto {
  touch-action: auto;
}

/* Prevents all default touch behaviors */
.none {
  touch-action: none;
}

/* Enables horizontal panning */
.pan-x {
  touch-action: pan-x;
}

/* Enables vertical panning */
.pan-y {
  touch-action: pan-y;
}

/* Enables panning and pinch-zoom, but disables double-tap to zoom */
.manipulation {
  touch-action: manipulation;
}

/* Experimental feature: Enables panning toward the left */
.pan-left {
  touch-action: pan-left;
}

/* Experimental feature: Enables panning toward the right */
.pan-right {
  touch-action: pan-right;
}

/* Experimental feature: Enables panning downward */
.pan-down {
  touch-action: pan-down;
}

/* Experimental feature: Enables panning upward */
.pan-up {
  touch-action: pan-up;
}

While the values pan-left, pan-right, pan-up, and pan-down are included in these examples, it's crucial to note that they are still in an experimental phase. Their behavior may not be consistent across different browsers and devices. For instance, a pan-left touch-action might not function as expected on certain mobile browsers. Therefore, it's recommended to test your touch interactions extensively.

Values

The touch-action property accepts the following values:

Value	Description
`auto`	The browser’s user agent determines the touch behavior on the element. This is the default setting.
`manipulation`	Allows touch-driven panning and pinch-zooming on the element. It's essentially `pan-x pan-y pinch-zoom` combined, with non-standard gestures like double-tap to zoom disallowed.
`none`	No default touch behaviors are allowed on the element.
`pan-x`	Enables touch-driven panning along the x-axis. It can coexist with `pan-y`, `pan-up`, `pan-down`, and `pinch-zoom`.
`pan-y`	Allows touch-driven panning along the y-axis. It can be combined with `pan-x`, `pan-left`, `pan-right`, and `pinch-zoom`.
`pan-left`	Permits touch-driven panning only when the user's finger moves to the right, indicating a pan towards the left. After scrolling starts, the direction can reverse (Experimental).
`pan-right`	Touch-driven panning is allowed when the user's finger moves to the left, indicating a pan towards the right. Direction can be reversed after scrolling begins (Experimental).
`pan-up`	Enables touch-driven panning only when the user's finger moves downwards, indicating an upward pan. After scrolling starts, the direction can be reversed (Experimental).
`pan-down`	Allows touch-driven panning only when the user's finger moves upwards, indicating a downward pan. Direction can be reversed after scrolling starts (Experimental).
`pinch-zoom`	Permits multi-finger touch-driven zooming. It can be combined with `pan-x`, `pan-left`, or `pan-right`; and `pan-y`, `pan-up`, or `pan-down` (Experimental).

Associated Properties

overflow
pointer-events

Tips and Tricks

The touch-action property is not inherited, so it needs to be set on each element that requires specific touch behavior.
touch-action can also be used to improve scrolling performance by disabling the delay of click events.
Be careful when using touch-action: none; as it can make certain elements or areas non-interactive, which could impact user experience.
The manipulation value is useful when you want to allow pinch-zoom and panning but prevent other interactions like double-tap zoom that can interfere with your own double-tap handlers.
While touch-action can help optimize touch interactions, remember it's only a part of the bigger picture. Other factors like layout, animations, and overall performance also contribute to the smoothness of touch interactions.

Browser Compatibility

Browser compatibility can vary significantly for the touch-action property. For specific compatibility information, refer to the first link in the Useful Resources section.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer	iOS Safari	Android Browser	Opera Mini	Chrome for Android	Firefox for Android
Support	Yes*	Yes*	No	Yes*	Yes*	Yes*	Yes*	Yes*	No	Yes	Yes

Note: In Safari on iOS versions 9.3 to 12.5, only auto and manipulation values are supported for the touch-action property.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.