HTML Guides for gestures

The touch-action property only accepts auto, none, manipulation, or a combination of panning keywords and pinch-zoom, so the validator reports anything else, such as all.

There is no all keyword. To leave every touch gesture to the browser, use auto, which is also the initial value. none turns off panning and zooming, and manipulation keeps panning and pinch zoom but turns off extras such as double-tap zoom. For finer control, combine one horizontal keyword (pan-x, pan-left or pan-right), one vertical keyword (pan-y, pan-up or pan-down) and pinch-zoom, for example touch-action: pan-y pinch-zoom.

auto, none and manipulation can't be combined with other keywords, and two keywords for the same direction can't appear together. In those cases the quoted value isn't always the wrong part: touch-action: none pinch-zoom reports none, and touch-action: pan-left pan-right reports pan-right.

Browsers ignore a declaration they can't parse. Because the initial value is auto, an invalid touch-action often looks harmless, but it can't override an earlier rule: if one rule sets touch-action: none and a later one tries to undo it with all, the element keeps none. Even auto can't bring back a gesture that an ancestor turned off, because the browser intersects the touch-action values of the element and its ancestors up to the nearest scroll container.

Invalid example

.slider {

touch-action: all;

}

.map {

touch-action: none pinch-zoom;

}

Valid example

.slider {

touch-action: auto;

}

.map {

touch-action: pinch-zoom;

}