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, 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.
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- Enable browser handling of all panning and zooming gestures.
none- Disable browser handling of all panning and zooming gestures.
pan-x- Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
pan-y- Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
manipulation- Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
pan-left,pan-right,pan-up,pan-down- Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
pinch-zoom- Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
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 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;
}Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Compatibility Standard The definition of 'touch-action' in that specification. |
LSLiving Standard | Added
pinch-zoom
property value. |
| Pointer Events – Level 2 The definition of 'touch-action' in that specification. |
WDWorking Draft | Added
pan-left,
pan-right,
pan-up,
pan-down
property values. |
| Pointer Events The definition of 'touch-action' in that specification. |
RECRecommendation | Initial definition |
Browser compatibility
[1] This property (Level 1 keywords only) 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. It is currently on track to be released in Firefox 52.[2] IE10+ additionally supports the non-standard values
pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.
[4] See
WebKit bug 133112.
See also
Pointer Events- WebKit Blog More Responsive Tapping on iOS