Taps land and answer at once

Big hit areas, an instant pressed state, no sticky hover, 16px inputs.

Guillermo Rauch@rauchg
One crucial area where mobile web lags behind native: input reliability. Tap targets are not large enough … Taps do not yield instant transitions … When I tap on a mobile app, I expect an instant state transition. Nightmare fuel: erratic hover states trigger after tapping with delays. Keyboard input is janky • Input focus triggers page zoom (fixable) …
Jun 23, 2024View on X ↗
Guillermo Rauch@rauchg
But any diminishment in the ability for a human to reliably enter information into the page is a deal breaker.
Apr 9, 2025View on X ↗
Guillermo Rauch@rauchg
There’s so much low hanging fruit in making websites and webapps friendly to touch devices. Example of the day: the awkward interaction between the page scroll and the floating keyboard when an input gains focus.
May 21, 2020View on X ↗

The phones simulate a fingertip that lands ±8px off, and iOS input zoom.

1 · Hit the icon it asks for

Tap the named icon in each phone, or tap 20 times.

24px hit areaBad
No taps yet
44px hit areaGood
No taps yet
/* The icon stays 24px; the finger gets 44px */
.icon-button { position: relative; width: 24px; height: 24px; }
.icon-button::before { content: ""; position: absolute; inset: -10px; }

2 · The tap answers right away

Switch tabs in both phones and watch what lingers.

300ms, sticky hoverBad
Tap → screen: –
:active, instantGood
Tap → screen: –
.tab { touch-action: manipulation; transition: transform 160ms var(--ease-out); }
.tab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover { background: var(--hover); }
}

3 · Focus without the zoom

Tap the email field in each phone.

14px inputBad
Log in to Vercel Continue
Zoom 100%
16px inputGood
Log in to Vercel Continue
Zoom 100%
/* iOS Safari zooms into any focused field under 16px, and stays zoomed */
input, select, textarea { font-size: max(16px, 1rem); }

Why it matters, pros and cons

Why it matters

A fingertip covers about 44px and lands a few pixels off. Size the hit area for the finger, not the icon, and answer on the frame it lands.

Pros

  • Near misses still land: no dead taps, no second try.
  • The pressed state shows before the click fires; the app feels native.
  • 16px inputs keep the layout still when the keyboard opens.

Cons

  • Hit areas can overlap neighbours; resolve to the nearest center.
  • Dense desktop toolbars can stay compact under pointer: fine.
  • Disabling zoom with maximum-scale fixes it by breaking accessibility.