Hysteresis and hit slop

Commit on release, pad small targets, lock direction after ~10 px.

From apple-design, §10 Gesture design details.

Press, drag away, drag back

Press, slide off, release. Then slide back first.

Fires on any releaseBad

–

Fired 0 · Cancelled 0

pointerup anywhere → commit
Commits in padded zoneGood

–

Fired 0 · Cancelled 0

pointerup inside(pad) → commit

Carousel in a vertical list

Swipe cards sideways, scroll the list, tap a card.

Locks on first moveBad
–
Waits, then locksGood
–

Hit padding on small icons

Tap each close button quickly, without aiming carefully.

Visual bounds onlyBad
Hits 0 of 0
Padded ::beforeGood
Hits 0 of 0
.icon-btn::before { content: ""; position: absolute; inset: -10px; }

Why it matters, pros and cons

Why it matters

A finger is a wobbling patch, not a point. Slop and padding absorb the noise.

Pros

  • Taps survive wobble; scrollers stop fighting.
  • Small icons get finger-sized targets.
  • Drag away to cancel a mis-press.

Cons

  • Drags start ~10 px late; track from the press point.
  • Padding must not overlap a neighbouring target.
  • Pen and drawing input should track from pixel one.