W3cubDocs

/CSS

touch-action

The touch-action CSS property sets how an element's 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;

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 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 top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.

After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.

Syntax

The touch-action property may be specified as either:

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.

Accessibility concerns

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.

Formal definition

Initial value auto
Applies to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Examples

Disabling all gestures

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.

HTML

<div id="map"></div>

CSS

#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

Result

Specifications

Specification Status Comment
Compatibility Standard
The definition of 'touch-action' in that specification.
Living Standard Added pinch-zoom property value.
Pointer Events – Level 3
The definition of 'touch-action' in that specification.
Editor's Draft Added pan-left, pan-right, pan-up, pan-down property values.
Pointer Events – Level 2
The definition of 'touch-action' in that specification.
Recommendation Latest recommendation.
Pointer Events
The definition of 'touch-action' in that specification.
Obsolete Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
touch-action 36 12 52
52
Not applicable to Firefox platforms that support neither pointer nor touch events.
29
Disabled
Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
23 13
pan-x and pan-y 36 12 52
52
Not applicable to Firefox platforms that support neither pointer nor touch events.
29
Disabled
Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
23 13
double-tap-zoom No 12 — 79 No 11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No No
manipulation 36 12 52
52
Not applicable to Firefox platforms that support neither pointer nor touch events.
29
Disabled
Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
23 13
none 36 12 52
52
Not applicable to Firefox platforms that support neither pointer nor touch events.
29
Disabled
Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
23 13
pinch-zoom 56 12 No
No
See bug 1285685.
11
11
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
43 13
pan-up, pan-down, pan-left and pan-right 55 79 No
No
See bug 1285685.
No 42 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
touch-action 37 36 52
52
29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
24 9.3 3.0
pan-x and pan-y 37 36 52
52
29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
24 13 3.0
double-tap-zoom No No No No No No
manipulation 37 36 52
52
29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
24 9.3 3.0
none 37 36 52
52
29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
24 13 3.0
pinch-zoom 56 56 No
No
See bug 1285685.
43 13 6.0
pan-up, pan-down, pan-left and pan-right 55 55 No
No
See bug 1285685.
42 No 6.0

See also

© 2005–2020 Mozilla 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