CSS touch-action: scope gesture control to the interactive surface

When to use it

A signature pad in a case intake form needs drawing strokes, while the rest of the form still needs normal vertical scrolling. Set touch-action none on the drawing surface only and give that surface a clear boundary and keyboard alternative for the task. A resize handle might instead need a narrower gesture policy, but never blanket the whole page with none. The sample leaves its form wrapper untouched. Test drawing with a finger, two-finger zoom, page scrolling from outside the pad, and touch selection in nearby fields. CSS does not implement the drawing logic; pointer handling, storage, undo, and accessibility belong to the application. If the signature is legally significant, the service must validate and retain the submitted data independently of the visual canvas.

.intake-signature__surface { touch-action: none; inline-size: 100%; min-block-size: 12rem; border: 2px solid #41637c; }

Cost and verification

Touch-action itself has little paint cost. Its failure cost is severe when it blocks panning or zooming over a large region. Keep the restricted surface as small as the actual gesture area and test on physical touch devices. Browser zoom is an accessibility route; do not disable it across the document. A gesture may already be claimed by the browser when application code receives a pointer cancellation, so handle cancellation as an ordinary input path. Preserve a non-touch way to complete the underlying task rather than equating a canvas gesture with universal access.

Common Mistakes

• Do not disable touch gestures on the whole page for one pad.
• Do not assume CSS creates the signature workflow.
• Do not omit a usable alternative to a drag-only action.

Connected lessons

• CSS Property Decisions
• CSS pointer-events: remove decorative hit targets carefully
• CSS cursor: match the pointer cue to a real action
• CSS form states: make errors and disabled fields explicit