1

http://jsfiddle.net/7yda75v0/8/

If I open the fiddle on my mac book air on latest chrome (38.0.2125.104) the height is 8, in Safari (7.0.3 (9537.75.14)) it's 10, in Firefox (32.0.3) 4.

My coworker have 9 on almost the same machine (my mac has 1.7 Ghz, his 2.0Ghz). Mac book pro device has also a different value.

It looks like a floating point inaccuracy, but why? It's not the browser and not the display. You can get some funny values when you enable browser zoom via CMD +

Changing the font-size to 1.0em of .t2 results into no differnces, even with browser zoom. The problem is not limited to very small em values, it's also present for non natural number, like 1.1em

// edit: this is not just for rem the problem occurs for em as well.

timaschew
  • 16,254
  • 6
  • 61
  • 78
  • Whoa... funny... you're right! I got 6 in chrome, 4 in IE – Tivie Oct 16 '14 at 16:06
  • possible duplicate of [How can I override the minimum-font-size in Firefox?](http://stackoverflow.com/questions/2421056/how-can-i-override-the-minimum-font-size-in-firefox) –  Oct 16 '14 at 16:40
  • If it would be min font-size the problem would not occur with `1.1 em` – timaschew Oct 16 '14 at 16:49
  • @timaschew - There's more than one thing going on here. Partly it's the minimum font size, partly it's the way different browsers deal with conversion from decimal to integer values. The metrics of the default fonts used may also play a part. – Alohci Oct 16 '14 at 20:01

1 Answers1

1

Note that rem is calculated based on the root font size. Each browser and display calculates a different pixel value. Also, css pixels don't necessarily correspond to a screen pixel, or the browser's calculations with the resulting screen pixels. The value changes with browser zoom, because the root font size changes when you zoom in.

Edit:

The actual size of .t2 relative to .t1 appears to be correct for every browser I have except Chrome, on Linux, OSX, and Windows. When zoomed out all the way, .t2 appears larger than .t1. Values such as 0.2rem and 1rem display properly, however. Safari on OSX (7.0.6), Firefox on Linux, and IE on Windows all display properly when zooming in.

Jeremiah Winsley
  • 2,537
  • 18
  • 30