Symbiote

Engineer the web, together.

Not so pixel perfect in Firefox

Imagine for a second, that you're trudging through the inconsistent waters of frontend development and you've incredibly close to finishing off a piece of work. You test in Internet Explorer 9+ and pray. The gods smile on you as you haven't hit an browser-specific bug. You then move onto Safari for Mac and iOS. The skies are clear and you're so close to being done when suddenly... tragedy strikes.

You test in Firefox and see that various parts of your layout are off by a couple of pixels for seemingly no reason. "Why Firefox? Why has thou forsaken me? I thought you weren't like Internet Explorer!" you scream, perhaps also throwing a few profanities around for good measure. After you let the frustration wash over you and calm down you'll probably end up adding a fixed-height on all offending elements so that the off-by-one bugs are "fixed".

But what the heck happened? This problem is not at all new, in fact, with this bug now passing 11 years of life. The issue lies with rounding up the calculated height of text, rather than down when using ems / rems on the line-height property. The only way to not hit this bug is to use fixed pixel sizes with the line-height property, which isn't really feasible if you want to support zooming in Internet Explorer 9.

You can run the following JSFiddle to get the calculated height of a div containing text with the offending line-height styles: https://jsfiddle.net/63v5vpaL/9/

As you can see, every browser that isn't Internet Explorer 6 or 7 will consistently render the div and have a height of 146px. That includes Firefox on the iOS 6S Plus.

Tested browsers with 146px height (rounded down):

  • Windows 7
    • Internet Explorer 8 (changed REM to EM for test purposes)
    • Internet Explorer 9
    • Internet Explorer 10 (Full Version: 10.0.9200.17229)
  • Windows 10
    • Chrome 59
    • Internet Explorer 11 (Full Version: 11.1358.14393.0)
    • Edge 38 (Full Version: 38.14393.1066.0)
  • iOS 5S
    • Safari
    • Chrome
  • iOS 6S Plus
    • Chrome
    • Safari
    • Firefox
  • Nexus 5X (Android 4.2)
    • Chrome
  • Mac OS Sierra
    • Safari 10.1
    • Chrome 59
    • Opera 46
    • Yandex 14.12
  • Mac OSX Lion
    • Safari 6
    • Chrome 49

Tested browsers with 147px height (rounded up):

  • Windows
    • Firefox 54 (32-bit)
  • Nexus 5X (Android 7)
    • Firefox
  • Mac OS Sierra
    • Firefox 54
  • Mac OSX Lion
    • Firefox 44

Old Internet Explorer shoutouts:

  • Internet Explorer 6 has 154px height.
  • Internet Explorer 7 has 148px height.