The touch-action
CSS property sets how a region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
/* 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;
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, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer_events
will receive a pointercancel
event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove
and pointerup
listeners for the remaining gestures. Applications using Touch_events
disable the browser handling of gestures by calling preventDefault()
, but should also use touch-action
to ensure the browser knows the intent of the application before any event listeners have been invoked.
When a gesture is started, the browser intersects the touch-action
values of the touched element and all its ancestors up to the one that implements the gesture (in other words, 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. After a gesture has started, changes to touch-action values will not have any impact on the behavior of the current gesture.
The touch-action
property may be specified as either:
auto
, none
, manipulation
, or
pan-x
, pan-left
, pan-right
, and/or one of the keywords pan-y
, pan-up
, pan-down
, plus optionally the keyword pinch-zoom
.auto
none
pan-x
pan-y
manipulation
pan-left
, pan-right
, pan-up
, pan-down
pinch-zoom
auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that 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 panning, but doesn't want to interfere with vertical scrolling or zooming of the document.
.image-carousel { width: 100%; height: 150px; touch-action: pan-y pinch-zoom; }
touch-action is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.
html { touch-action: manipulation; }
A declaration of touch action: none;
may inhibit operating a browser's zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.
Specification | Status | Comment |
---|---|---|
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. | Working 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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 36 | 12 | 52
|
11
|
23 | No
|
manipulation |
36 | 12 | 52
|
11
|
23 | No |
double-tap-zoom
|
No | 12 | No | 11
|
No | No |
pinch-zoom |
56 | 12 | No
|
11
|
43 | No |
pan-up , pan-down , pan-left and pan-right
|
55 | No | No
|
No | 42 | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 37 | 36 | Yes | 52
|
Yes | No
|
Yes |
manipulation |
37 | 36 | Yes | 52
|
Yes | 9.1 | Yes |
double-tap-zoom
|
No | No | Yes | No | No | No | No |
pinch-zoom |
56 | 56 | Yes | No
|
43 | No | 6.0 |
pan-up , pan-down , pan-left and pan-right
|
55 | 55 | No | No
|
42 | No | 6.0 |
Pointer Events
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action