Safari does not correctly calculate fractional em / rem values, resulting in severe visual errors in layout.

Original: http://jsfiddle.net/Vm37n/2/

by Jens Grochtdreis

HTML

<div class="top">
    Top
</div>
<div class="lib">
    lib
    <div class="content">content</div>
</div>

CSS

body, html { height: 100%; width: 100%; }

body {
    background: yellow;
    margin: 0;
    font-size: 16px;
}

.top {
  background: green;
  height: 1.2em;
  padding: 0.8em;
  padding-top: 1em; }

.lib {
  width: 22em;
  height: calc(100% - 3em); /* account for top height: 1.2 + 0.8 + 1 === 3 */
  background: blue; }

.content {
  background: red;
  padding: 0.8em;
  width: 20.4em; /* account for padding: 22 - 0.8 * 2 === 20.4 */
  height: 10em; }

JavaScript

/*
Issue:
Safari does not correctly calculate fractional em / rem values, resulting in severe visual errors in layout.


Example:
In the Result to the right, notice the ~2px blue gap to the right of the red div. This is a result of the fractional values used in the ".content" style. Changing them to "padding: 1em; width: 20em;" eliminates the gap, despite the same 22rem total width.

Also notice the 1px yellow gap below the blue div. This is similarly a result of the fractional rem values in ".top" and can be eliminated by using to whole values.


Notes:
Values of 1/8 em / rem (ex. 0.5em, 1.125em, 2.25rem) also seem to work correctly.

These errors are cumulative. For example, a column of 5 vertically stacked elements can accumulate a visible gap of 10px at the bottom of the column.
*/