CODEWITHSUNDEEP
htmlcssfloating-point-precision
timaschew
timaschew

Reputation: 16622

CSS: 0.1em === WTF, floating point inaccuracy?

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.

Upvotes: 1

Views: 393

Answers (1)

Jeremiah Winsley
Jeremiah Winsley

Reputation: 2557

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.

Upvotes: 1

Related Questions