1. css
  2. /properties
  3. /touch-action

touch-action

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:

ValueDescription
autoThe browser’s user agent determines the touch behavior on the element. This is the default setting.
manipulationAllows 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.
noneNo default touch behaviors are allowed on the element.
pan-xEnables touch-driven panning along the x-axis. It can coexist with pan-y, pan-up, pan-down, and pinch-zoom.
pan-yAllows touch-driven panning along the y-axis. It can be combined with pan-x, pan-left, pan-right, and pinch-zoom.
pan-leftPermits 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-rightTouch-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-upEnables 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-downAllows touch-driven panning only when the user's finger moves upwards, indicating a downward pan. Direction can be reversed after scrolling starts (Experimental).
pinch-zoomPermits 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.

BrowserChromeEdgeSafariFirefoxOperaInternet ExploreriOS SafariAndroid BrowserOpera MiniChrome for AndroidFirefox for Android
SupportYes*Yes*NoYes*Yes*Yes*Yes*Yes*NoYesYes

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.

Useful Resources

Can I use: touch-action

Compat Spec: touch-action

W3C Pointer Events: touch-action

Chrome Developer Blog: touch-action

Understanding WCAG 2.0 - A Note on Accessability

Webkit Blog - More Responsive Tapping on iOS