Touch-action pinch-zoom CSS property Sample

Available in Chrome 56+ | View on GitHub | Browse Samples

Background

touch-action allows you to define which browser actions are allowed over an element.

With the pinch-zoom value, user agents MAY consider touches that begin on the element for the purposes of continuous zooming and immediately execute the default action instead of waiting for an event handler to not cancel it.

Default behaviour

touch-action: pan-x

touch-action: pan-x pinch-zoom

touch-action: pan-y

touch-action: pan-right

touch-action: pan-down