Web/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:

One of the keywords auto, none, manipulation, or
One of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.

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 StandardThe definition of 'touch-action' in that specification.	Living Standard	Added `pinch-zoom` property value.
Pointer Events – Level 3The definition of 'touch-action' in that specification.	Editor's Draft	Added `pan-left`, `pan-right`, `pan-up`, `pan-down` property values.
Pointer Events – Level 2The definition of 'touch-action' in that specification.	Recommendation	Latest recommendation.
Pointer EventsThe definition of 'touch-action' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`touch-action`	Chrome Full support 36	Edge Full support 12	Firefox Full support 52 Notes' Full support 52 Notes' Notes' Not applicable to Firefox platforms that support neither pointer nor touch events. Full support 29 Notes' Disabled' Notes' 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.	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 23	Safari Full support 13	WebView Android Full support 37	Chrome Android Full support 36	Firefox Android Full support 52 Full support 52 Full support 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.	Opera Android Full support 24	Safari iOS Full support 9.3	Samsung Internet Android Full support 3.0
`pan-x` and `pan-y`	Chrome Full support 36	Edge Full support 12	Firefox Full support 52 Notes' Full support 52 Notes' Notes' Not applicable to Firefox platforms that support neither pointer nor touch events. Full support 29 Notes' Disabled' Notes' 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.	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 23	Safari Full support 13	WebView Android Full support 37	Chrome Android Full support 36	Firefox Android Full support 52 Full support 52 Full support 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.	Opera Android Full support 24	Safari iOS Full support 13	Samsung Internet Android Full support 3.0
`double-tap-zoom` Non-standard'	Chrome No support No	Edge No support 12 — 79	Firefox No support No	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`manipulation`	Chrome Full support 36	Edge Full support 12	Firefox Full support 52 Notes' Full support 52 Notes' Notes' Not applicable to Firefox platforms that support neither pointer nor touch events. Full support 29 Notes' Disabled' Notes' 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.	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 23	Safari Full support 13	WebView Android Full support 37	Chrome Android Full support 36	Firefox Android Full support 52 Full support 52 Full support 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.	Opera Android Full support 24	Safari iOS Full support 9.3	Samsung Internet Android Full support 3.0
`none`	Chrome Full support 36	Edge Full support 12	Firefox Full support 52 Notes' Full support 52 Notes' Notes' Not applicable to Firefox platforms that support neither pointer nor touch events. Full support 29 Notes' Disabled' Notes' 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.	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 23	Safari Full support 13	WebView Android Full support 37	Chrome Android Full support 36	Firefox Android Full support 52 Full support 52 Full support 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.	Opera Android Full support 24	Safari iOS Full support 13	Samsung Internet Android Full support 3.0
`pinch-zoom`	Chrome Full support 56	Edge Full support 12	Firefox No support No Notes' No support No Notes' Notes' See bug 1285685.	IE Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 43	Safari Full support 13	WebView Android Full support 56	Chrome Android Full support 56	Firefox Android No support No Notes' No support No Notes' Notes' See bug 1285685.	Opera Android Full support 43	Safari iOS Full support 13	Samsung Internet Android Full support 6.0
`pan-up`, `pan-down`, `pan-left` and `pan-right`	Chrome Full support 55	Edge Full support 79	Firefox No support No Notes' No support No Notes' Notes' See bug 1285685.	IE No support No	Opera Full support 42	Safari No support No	WebView Android Full support 55	Chrome Android Full support 55	Firefox Android No support No Notes' No support No Notes' Notes' See bug 1285685.	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.