Why Does normalize.css Include `-webkit-text-size-adjust: 100%`? The iOS Font Scaling Fix Explained

The -webkit-text-size-adjust: 100% rule in necolas/normalize.css prevents iOS Safari from automatically inflating font sizes during orientation changes or system text-size adjustments, ensuring your typography renders exactly as specified.

The necolas/normalize.css library provides a minimal, cross-browser CSS baseline that removes quirky default browser styles. Among its carefully selected resets, the -webkit-text-size-adjust: 100% declaration targets a WebKit-specific behavior that can break layout consistency on mobile Apple devices.

The iOS Text Scaling Problem

iOS Safari automatically scales text when a page's viewport changes or when users adjust their system "text size" preferences. This automatic scaling can disrupt carefully crafted typography and spacing, causing text to overflow containers or appear disproportionate to surrounding elements. Without intervention, a page designed with precise rem or pixel values might render unpredictably when a user rotates their iPhone from portrait to landscape.

How normalize.css Implements the Fix

In the core normalize.css file, the rule appears within the HTML element block alongside a descriptive comment:

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

The inline comment identifies this as the second normalization in the file, specifically noting its purpose: "Prevent adjustments of font size after orientation changes in iOS." By forcing the value to 100%, the stylesheet disables the browser's automatic adjustment algorithm, locking text sizes to the author's declared values regardless of device orientation or user settings.

WebKit Prefix and Legacy Browser Support

-webkit-text-size-adjust is the vendor-prefixed version of the standard text-size-adjust CSS property. According to the source code in necolas/normalize.css, older versions of iOS Safari (pre-iOS 10) only recognize the -webkit- prefix, making the prefixed declaration essential for cross-browser consistency. The standard unprefixed property remains experimental in many browsers, so normalize.css includes the WebKit-specific version to guarantee the fix works across both legacy and modern WebKit engines.

Customizing or Overriding the Rule

While normalize.css disables automatic adjustment to preserve layout integrity, you can override this behavior for specific accessibility or design requirements:

Allow automatic scaling (respects user preferences):

html {
  -webkit-text-size-adjust: auto;
}

Disable adjustments completely:

html {
  -webkit-text-size-adjust: none;
}

Using the standard property for modern browsers:

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

Summary

• iOS Safari automatically scales text during orientation changes and system text-size adjustments, which can break visual layouts.
• -webkit-text-size-adjust: 100% disables this automatic scaling, preserving the author's intended font sizes as implemented in normalize.css.
• The rule uses the WebKit-specific prefix because older iOS versions (pre-iOS 10) require it for support.
• You can override the value with auto or none depending on whether your project prioritizes user accessibility preferences or strict visual control.
• The standard text-size-adjust property works in modern browsers, but the prefixed version ensures backward compatibility.

Frequently Asked Questions

What exactly does -webkit-text-size-adjust: 100% do?

This CSS declaration tells WebKit browsers—primarily iOS Safari—to render text at exactly 100% of the size specified by the author, preventing the browser from automatically inflating font sizes when the device rotates or when users change system text-size settings. It ensures the computed font size matches your stylesheet definitions exactly.

Is this property still necessary in modern iOS Safari?

Yes. While iOS has evolved, the automatic text-scaling behavior remains part of Safari's default stylesheet to improve readability on mobile sites. Including the rule in necolas/normalize.css ensures consistent rendering across all iOS versions, including legacy devices running pre-iOS 10 software that only recognize the -webkit- prefix.

How does this differ from the standard text-size-adjust property?

-webkit-text-size-adjust is the vendor-prefixed implementation specific to WebKit engines like Safari. The standard text-size-adjust property follows the CSS specification but has limited browser support. Normalize.css uses the prefixed version to guarantee the fix works in older Safari versions while still affecting modern WebKit browsers.

Can I safely remove this rule if I'm not targeting iOS?

If your project explicitly excludes WebKit-based browsers—including Safari on macOS and iOS, plus legacy Chrome versions—you could technically remove it. However, since normalize.css aims to provide a universal baseline, keeping the rule ensures protection against any WebKit-based user agents that might render your content, maintaining the library's goal of cross-browser consistency.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}