無法在Chrome / Safari中重新定位浮動元素的子元素

Question

我有一個頁面，其中某些元素從頁面的右下側流動，在chrome和safari中出現了一個怪異的問題，在刪除了一些浮動元素后，浮動元素的子級未重新定位。

在OSX上，它似乎可以在Firefox和Opera中正常工作，但是Chrome和Safari僅重新定位浮動元素，而不是子元素。 在檢查器中切換某些屬性會重置它，因此它可能是渲染錯誤。 是什么原因引起的和/或如何避免呢？

參見此示例小提琴。

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

此答案中的修復為我修復了它：

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

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

與我在回答中所說的類似，這似乎也是WebKit渲染錯誤。

我還說過“我不確定此修復程序是否有缺點”，並且同樣適用，但是該答案已經超過1年了，以+ 20 / -0票且沒有負面評論，因此我猜沒關系。