Chrome 37 calc rounding

Question

<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

Result: http://i.imgur.com/DYor2yb.png

This fiddle shows a problem with Chrome 37. Using the calc(100% - 10px) function on an element with decimal pixels, it always rounds down. This causes strange things.

In the example, the outer div has a width of 50.5px. The two inner divs have calc(100% - 10px) and 10px as widths. Even though this should be 50.5 total, it still shows the red background.

Issue seems to be introduced in Chome 37. Does anyone know if this issue has already been reported and/or if it will be solved?

Edit: I understand from the comments that the issue is already present for a longer time. Is there any (cross-browser) neat way to fix this?

Answer 1

This is a known Chrome bug that is now fixed and will soon be merged to the dev Channel.

https://code.google.com/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified

Answer 2

After inspecting the elements it seems clear that:

1) width: 55.5px; is being rounded up to 56px and

2) width: calc(100% - 10px); - the 100% width is being rounded down to 55px

this leaves 1px left of red in the 56px wide container.

So as a work-around just simply refrain from adding a width to you remainderDiv,

and use a different method for 'filling up' the container such as overflow:hidden

FIDDLE

This way the remainder div will either be 10px or 11px - but at least the layout won't break