Beware of -webkit-text-size-adjust:none

The other day I came a cross a website with text too small for me to read it comfortably. I hit Command-Plus a couple of times to make Safari bump up the text size a bit… and nothing happened. What?

After some investigation of the CSS used on the site the culprit turned out to be the following CSS (don’t use):

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

What that does is prevent WebKit-based browsers from resizing text. Not even full page zoom resizes the text. Now, how can preventing your users from resizing text be a good idea?

According to Apple’s Safari CSS Reference (JavaScript required), -webkit-text-size-adjust Specifies a size adjustment for displaying text content in Safari on iOS.

When given a value of “none”, the documentation specifies that The text size is not adjusted.

Well, on my desktop Mac running Mac OS X Snow Leopard, no WebKit-based browser (tested in Safari, Chrome, OmniWeb, iCab, and the latest WebKit nightly build) adjusts text size when this property is set, so this does not apply only to Safari on iOS.

Please use extreme care with this property. Using it for special effects on non-essential text may possibly be ok in some rare cases, but locking down the text size of the entire document by applying it to the body element… I can’t think of a good reason to do that, especially not in desktop browsers.

Posted on November 25, 2010 in CSS, Browsers, Accessibility