touch-action

Summary

The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user (for instance, by panning or zooming).

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
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

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: 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.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Note: The following property values have not yet been formally standardized. They are specified in the Pointer Events – Level 2 Editor's Draft specification and not in Pointer Events Recommendation. These property values are not widely implemented.

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.

Formal syntax

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

Example

.list {
  width: 200px;
  height: 50px;
  overflow-x: scroll;
}

.list > .entry {
  touch-action: pan-x;
}

Specifications

Specification	Status	Comment
Pointer Events – Level 2 The definition of 'touch-action' in that specification.	Editor's Draft	Added property values `pan-left`, `pan-right`, `pan-up`, `pan-down`
Pointer Events The definition of 'touch-action' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	36.0	Not supported^[1]	10.0-ms^[2] 11.0	26.0	Not supported^[4]

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	37.0	Not supported^[1]	(Yes)	?	Nightly build [3]

[1] Since Firefox 29, support in Firefox is hidden behind the layout.css.touch_action.enabled preference (bug 960316).

[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.

touch-action

Summary

Syntax

Values

Formal syntax

Example

Specifications

Browser compatibility

See Also

Document Tags and Contributors