Children of Floated Elements Not Re-Positioning in Chrome/Safari

Question

I have a page with some elements that flow along the bottom from right of the page, and I'm having a weird issue in chrome and safari with children of floated elements not repositioning after some of the floated elements are removed.

On OSX, it seems to work fine in Firefox and Opera, but Chrome and Safari only reposition the floated element, and not the children. Toggling some properties in the inspector will reset it, so it might be a rendering bug. What's causing it and/or how can I avoid it?

See this example fiddle.

html:

<div id="container">
    <div class="float"> // when this is removed...
        <div class="box"></div>
    </div>
    <div class="float"> 
        <div class="box"></div> // ...these stay in the same spot
    </div>
    <div class="float">
        <div class="box"></div> // ...these stay in the same spot
    </div>
</div>

css:

#container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.float {
    width: 100px;
    float: right;
    height: 100%;
    margin-right: 1em;
}
.box {
    width: 100px;
    bottom: 0;
    height: 100px;
    position: absolute;
}

Answer 1

The fix from this answer fixes it for me:

.float {
    -webkit-transform: scale3d(1,1,1);
}

http://jsfiddle.net/thirtydot/GYFqU/3/

Similarly to what I said in that answer, this also appears to be a WebKit rendering bug.

I also said "I'm not sure if there are any downsides to this fix", and the same thing still applies, but that answer is now over a year old with +20/-0 votes and no negative comments, so I guess it's fine.