BrowserQuirk: CSS font-size changes inexplicably. WHY?!

Like most bug reports, this one is best illustrated with some screen shots.

The Setup

Behold, Honey’s home feed:

Looks normal, right? Ok great, now let’s rotate this sucker.

Still normal. So far, so good. Here’s the punchline. Rotate ‘er back.

And BAM. There it is. The sub-header line font-size for all the feed rows have somehow inexplicably doubled! What gives?!

The Journey

Ok, so like all good debuggers, let’s get down to business. Open up web developer tools and track this down. Maybe it’s a faulty CSS issue?

Let’s drill down to the offending text and inspect the font-size property set in the CSS.

Specifically, note the highlighted line on the right sidebar: we explicitly set our font-size to 10px. The text node on the right is most definitely NOT 10px. What is this madness?!

Ok ready for the kicker? If we inspect the computed styles tab (basically shows us what the browser has calculated the font-size and other properties of the element to be), we get this…

Notice the highlighted line on the right hand sidebar again. We saw from the previous screen that the property is set explicitly to 10px. Yet Safari seems to be setting it to 17px!

Heh. What?!

To compound the issue, notice how the “ALL ACTIVITY” and “DATE” elements (on the left-hand simulator screen) have preserved their font-sizes. Something REALLY weird is going on.

The Recovery

Ok fast forward about an hour and a few thousand WHAT?!s. Here’s how we fixed this.

First, we googled.

As it turns out, Mobile Safari will automagically scale up text that it deems too small. But, as it also turns out: it won’t give us any indication of this in the dev tools. Lol.

To prove this out, we simply updated the the font-size rule we set to 11px, which actually happened to solved our problem. Of course, that’s not our actual solution — we used the -webkit-text-size-adjust rule on the body (as described in that SO post) to turn off size adjust.

However, the text-size adjust did not explain why the “ALL ACTIVITY” and “DATE” elements were impervious to this “feature”.

My hunch was that Mobile Safari only applied the transformation on elements that it deemed to be “text content” bearing…or in other words, inline-elements only. Our “ALL ACTIVITY” and “DATE” elements were simply text nodes inside list item elements, which could explain why their font sizes stayed intact.

To prove this out, we updated the sub header line markup from a bunch of nested span tags to a bunch of divs. As soon as we did that, our text resize bug disappeared.

Mystery solved!

I decided to write a post on this because it took us a while to drill down to a point where we could even formulate coherent phrases that framed the problem (ie: so that we could actually google for a potential solution/documentation reference). Hopefully, someone in the future will stumble on to this article and save him/herself some time and misery.

Here’s the TL;DR for the folks watching at home:

  1. Text resizes happen automagically when rotating from landscape to portrait on Mobile Safari
  2. Setting -webkit-text-size-adjust: none; will tell Safari to not to this by default.
  3. This magic only occurs on elements deemed to be “text content”, or in other words, inline elements such as spans and the like.

Cheers!

<!-- other pieces: 10 Lessons...FEWD and GitBot -->
</TaqKarim>