How text-size-adjust: 100% Prevents Safari Font Zoom

This article explains how the CSS text-size-adjust: 100% property stops mobile Safari from arbitrarily enlarging font sizes. By default, iOS WebKit applies a built-in text-inflation algorithm to boost legibility, particularly when devices rotate from portrait to landscape mode. Implementing text-size-adjust: 100% overrides this automatic scaling, ensuring web fonts render exactly at their defined CSS values while keeping standard pinch-to-zoom functionality intact.

The Cause of Automatic Font Zooming in Safari

Mobile Safari includes a legacy usability feature called the text-inflation algorithm. When a user navigates a website on an iPhone or iPad, WebKit inspects the layout to determine whether the text might be too small to read comfortably. If the viewport changes—most commonly when switching from portrait to landscape orientation—Safari attempts to assist the user by automatically boosting the computed font size of body text and paragraphs.

While intended to help users read non-responsive desktop sites on smaller screens, this behavior frequently disrupts intentionally designed responsive layouts, causing broken line heights, overflowing containers, and misaligned components.

How text-size-adjust: 100% Solves the Issue

The text-size-adjust property gives developers explicit control over the browser's text-inflation behavior.

When you set the property to 100%, you are directing the browser engine to render all text at exactly 100% of its specified size, regardless of screen orientation or viewport dimensions. By specifying 100%, you explicitly tell WebKit:

1. Calculate the font size strictly according to the CSS rules defined in the stylesheet.
2. Disable the heuristic algorithm that calculates dynamic text scaling factors.
3. Treat the rendered font size consistently across both portrait and landscape orientations.

Why Use 100% Instead of none

The text-size-adjust property also accepts the value none. While none also disables automatic font zooming, standard web practices strongly favor 100%.

In older versions of WebKit and certain mobile browsers, setting text-size-adjust: none caused severe accessibility regressions by disabling user-initiated pinch-to-zoom controls entirely. Using text-size-adjust: 100% achieves the desired result—neutralizing the browser's automatic text scaling—without interfering with the user's ability to manually zoom in and out of the page.

Proper CSS Implementation

Because text-size-adjust began as an experimental vendor property, you should apply both the vendor-prefixed property and the standard property to the root html element:

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

Applying this rule to the root html element ensures inheritance across the entire DOM tree, stabilizing all typography across iOS devices without unexpected layout shifts during orientation changes.