WebKit's percent-sized floats bug: are there any workarounds? - webkit

Question

I'm experiencing what appears to be a bug in WebKit's rendering of floating elements' width when they have margins.
The following renders as one would expect in Firefox (3.6) and WebKit (Chromium 5.0):
<div style="width: 100%; background-color: green;">
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>
That is to say, as a completely red box, with no green background showing.
Now try this:
<div style="width: 100%; background-color: green;">
<div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>
What is expected is the same as as before, except for 10% of the box on the left-hand side to be left green. This is what is seen on Firefox.
However, on WebKit browsers, one pixel of green is left on the right-hand side of the box: the floating elements no longer completely fill it up.
The problem appears to compound when more floats and margins are used, leaving a larger amount not filed up.
Is this a bug? A rounding error? It's certainly not what I expected. And more importantly, what can I do to get around it?
EDIT: After much searching I found that it is a reported bug; probably a rounding error as suspected: https://bugs.webkit.org/show_bug.cgi?id=5531
My most important question still stands: is there any way around the bug?

Answer 1

I suspect there is no magic workaround for this. Browsers interpret sizes in a mathematically different way. There is another question slightly related to this here, which is the particular problem I encountered. There is wider infomation here. I once read a great article explaining the problem very exactly, but I lost the bookmark. I'll try and find it again so I can post it here.
Essentially, different browsers round decimal pixel values differently. So, the short answer is you will never get an exact cross-browser solution as long as this differences exist. The particular problem I had was the one described in my first link: even without using percentage values (fixed pixel sizes), I encountered 2 "sides" between browsers, in which the vertical alignment of some elements would be different: Firefox and Internet Explorer, on the one side, and Opera, Chrome and Safari on the other.
Yet, this depended on the exact values of line-height and font-size I used, so sometimes I would get differences even between Firefox and IE, or other combination. Without using conditional CSS, I could only reduce the problem to those 2 groups, and then used conditional CSS to adjust the margins in Opera and Chrome.
So, to sum it up, as far as I know, I'm afraid you'll have to use conditional CSS. Cheers!

Answer 2

Perhaps something like this instead?
<div style="width: 100%;">
<div style="background-color: green; float: left; width: 10%;"></div>
<div style="background-color: red; float: left; width: 40%;">n</div>
<div style="background-color: red; float: left; width: 50%;">n</div>
<div style="clear: both;"></div>
</div>