Tune touch, tap and overscroll

Tell touch browsers what a gesture means, so they stop guessing.

Web Interface Guidelinesvercel-labs · command.md
`touch-action: manipulation` (prevents double-tap zoom delay) `-webkit-tap-highlight-color` set intentionally `overscroll-behavior: contain` in modals/drawers/sheets During drag: disable text selection, `inert` on dragged elements `autoFocus` sparingly—desktop only, single primary input; avoid on mobile
Touch & InteractionView source ↗

From web-design-guidelines (Web Interface Guidelines).

Scroll a sheet past its end

Scroll each sheet past its end. Watch the page behind.

Chains to the pageBad

Order #4821

    End of sheet

    Activity

      overscroll-behavior: auto
      Stops at the edgeGood

      Order #4821

        End of sheet

        Activity

          overscroll-behavior: contain
          .sheet { overflow-y: auto; overscroll-behavior: contain; }

          Drag to reorder

          Drag a card, drifting sideways. Keyboard: grip plus ↑ ↓.

          Selects textBad

          Runs pay out top to bottom.

            0 selected

            pointer-events: none
            No selection, inertGood

            Runs pay out top to bottom.

              0 selected

              user-select: nonecard.inert = true

              html.dragging { user-select: none; }
card.inert = true;

              Tap fast

              Tap each +1 as fast as you can.

              Waits for a 2nd tapBad
              Seats
              Taps
              0
              Registered
              0
              Delay
              –

              1.0×

              touch-action: auto
              Every tap is a tapGood
              Seats
              Taps
              0
              Registered
              0
              Delay
              –

              1.0×

              touch-action: manipulation
              button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(0.97); }

              Why it matters, pros and cons

              Why it matters

              Touch browsers guess what a gesture means. These declarations answer up front.

              Pros

              • Rapid taps register instead of zooming.
              • The page under a sheet stays put.
              • Drags leave no stray selection.

              Cons

              • touch-action: none kills scroll and pinch zoom.
              • Transparent highlight without :active means no feedback.
              • inert hides the card from assistive tech mid-drag.