This article needs an editorial review. How you can help.
Summary
The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser).
| Initial value | auto |
|---|---|
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
By default dragging, scrolling and pinching gestures are handled exclusively by the browser, resulting in a pointercancel event being sent to the application. By explicitly specifying which gestures should be handled by the browser, an application can supply it's own behavior in pointermove and pointerup listeners for the remaining gestures.
When a gesture is performed, the browser intersects the touch-action values of the touched element and all it's ancestors up to the one that implements the gesture (i.e. the first containing scrolling element). This means that in practice, touch-action is typically applied only to individual elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.
Syntax
/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial; touch-action: unset;
Values
auto- The user agent may determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.
none- Use this value to disable all of the default behaviors and allow your content to handle all touch input (touches that begin on the element must not trigger default touch behaviors).
pan-x- The user agent may consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content.
pan-y- The user agent may consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content.
manipulation- The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.
pan-left,pan-right- The user agent may consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content.
pan-up,pan-down- The user agent may consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content.
pinch-zoom- The user agent may consider touches that begin on the element only for the purposes of pinch zooming the element's nearest ancestor with zoomable content.
Formal syntax
auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
Examples
The most common usage is to disable all gestures on an element (and it's non-scrollable descendants) which provides its own dragging and zooming behavior – such as a map or game surface.
#map {
touch-action: none;
}
Another common pattern is that of an image carousel which uses pointer events to handle horizontal dragging/swiping, but doesn't want to interfere with vertical scrolling or zooming of the document.
.image-carousell {
width: 100%;
height: 50px;
touch-action: pan-y pinch-zoom;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Compatibility Standard The definition of 'touch-action' in that specification. |
Living Standard | Added pinch-zoom property value. |
| Pointer Events – Level 2 The definition of 'touch-action' in that specification. |
Editor's Draft | Added pan-left, pan-right, pan-up, pan-down property values. |
| Pointer Events The definition of 'touch-action' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 36.0 | (Yes) | No support[1] | 10.0-ms[2] 11.0 |
23 | No support[4] |
pan-up, pan-down, pan-left, pan-right |
55.0 | No support | ? | ? | ? | No support[4] |
pinch-zoom |
56.0 | (Yes) | ? | 10.0-ms[2] 11.0 |
43 | No support[4] |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | No support | 36.0 | (Yes) | No support[1] | (Yes) | (Yes) | 9.1 [3] | 36.0 |
pan-up, pan-down, pan-left, pan-right |
No support | 55.0 | No support | No support | No support | 42 | No support | 55.0 |
pinch-zoom |
No support | 56.0 | (Yes) | No support | ? | 43 | No support | 56.0 |
[1] This property is implemented since Firefox 29, but is hidden behind the layout.css.touch_action.enabled preference. Starting in Firefox Nightly 50, it is enabled by default when running in nightly builds only; no decision has been made on when it will make its way along toward release.
[2] IE10+ additionally supports the non-standard values pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.
[3] Only supports the manipulation and auto values in iOS.
[4] See WebKit bug 133112.
See also
Pointer Events- WebKit Blog More Responsive Tapping on iOS