touch-action
Tells the browser how to handle touch interactions (like swiping or pinching) on a specific element. This is vital for complex mobile UIs, such as custom maps or sliders, where you want to disable default browser scrolling to handle it yourself.
Quick example
.map-canvas {
/* Disables the browser's default touch behaviors so the app can handle custom dragging/zooming */
touch-action: none;
}Quick facts
Initial value
autoInherited
No
Applies to
all elements except non-replaced inline elements, table rows, columns, and row/column groups
Animation type
notAnimatable
Values
autononepan-xpan-leftpan-rightpan-ypan-uppan-downpinch-zoommanipulation touch-action Browser Support
Widely available Since 2019 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2019.
Safe to use without fallbacks.
36+
52+
13+
12+