javascript - float 元素的子元素不会在 Chrome/Safari 中重新定位

Question

我有一个页面，其中一些元素从页面右侧沿着底部流动，我在 chrome 和 safari 中遇到一个奇怪的问题， float 元素的子元素在删除一些 float 元素后没有重新定位。

在 OSX 上，它似乎在 Firefox 和 Opera 中运行良好，但 Chrome 和 Safari 仅重新定位 float 元素，而不是子元素。在检查器中切换某些属性会重置它，因此它可能是一个渲染错误。是什么原因造成的和/或我该如何避免？

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

来自 this answer 的修复帮我修好了:

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

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

与我在那个答案中所说的类似，这似乎也是一个 WebKit 渲染错误。

我还说“我不确定这个修复是否有任何缺点”，同样的事情仍然适用，但这个答案现在已经有一年多了，只有 +20/-0 票，没有负面评论，所以我想这很好。