Auto-Zoom on Input Focus

The Problem

Whenever a user taps an input, select, or textarea whose computed font-size is below 16px, iOS zooms the entire viewport in. The page stays zoomed until the user manually pinches to zoom back out — a jarring experience that breaks custom layouts.

Search...

ZOOMED

Page zooms on input tap (font-size < 16px)

Root Cause

iOS applies automatic zoom when the computed font-size of the focused input is less than16px. This threshold is defined in WebKit's RenderThemeIOS.mm source file. The intent is to make small text easier to read and type in, but the result breaks designs that use compact inputs.

Importantly, it's the computed font-size that matters — even if a parent element sets a size, if the input's effective rendered size is under 16px, the zoom triggers.

Fix 1 — Set font-size to 16px (Recommended)

forms.css

/* The simplest, most accessible fix */
input,
select,
textarea {
  font-size: 16px; /* Meets the iOS threshold */
}

/* Or be explicit with rem */
input,
select,
textarea {
  font-size: 1rem; /* Assumes 16px root — confirm your base font-size */
}

Fix 2 — Scale Down with transform (Design-preserving)

If your design requires visually smaller inputs but you can't change the font-size appearance, set the font-size to 16px and use transform: scale() to shrink it visually. The browser sees 16px (no zoom triggered), but the user sees a smaller element.

forms-scale.css

input.compact {
  font-size: 16px;                /* iOS sees 16px → no zoom */
  transform: scale(0.875);        /* Visually renders ~14px */
  transform-origin: left center;
  /* Compensate for negative space from scaling */
  margin-right: -12.5%;
}

Fix 3 — viewport maximum-scale (Not recommended)

index.html

<!-- This prevents auto-zoom but also disables ALL user zoom — bad for accessibility -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Accessibility warning: Setting maximum-scale=1 prevents zoom for users who rely on browser zoom for readability. This fails WCAG 1.4.4 (Resize Text). Only use this if you have no other option and understand the tradeoff.

Tip: Option 1 (font-size: 16px) is the right default. Most design systems already use 16px for body text, so inputs matching that size don't feel out of place. If you're fighting a smaller custom design system, use Option 2.

Browser Support

Browser	Min Version	Status	Notes
Safari iOS	All	Partial	Zooms on focus if font-size < 16px; fix: set font-size to 16px
Chrome iOS	All	Partial	Same WebKit engine, same behaviour
Chrome Android	All	Supported	No auto-zoom quirk
Firefox	All	Supported	No auto-zoom quirk