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

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?