webkit位置使用webkit-transform修复了中断

Question

我遇到了在webkit浏览器中渲染的问题。

<div class="left">
    <div class="fixed"></div>
</div>
<div class="container">
    <div class="square"></div>
</div>

.left {
    position: absolute;
    top: 100px;
    left: 10px;
    width: 100px;
    height: 300px;
    background: red;
    z-index: 2;
    overflow-y: hidden;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 90px;
    z-index: 2;
    background: blue;
}

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
    background: grey;
    overflow-y: hidden;
     z-index: 1;
}

.square {
    margin-left: 120px;
    margin-top: 120px;
    width: 40px;
    height: 53px;
    z-index: 481;
    background: green;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    position: absolute;
}

我的固定元素不可见：http://jsfiddle.net/RV5WP/3/

但如果我删除webkit转换，它就可以工作：http://jsfiddle.net/RV5WP/2/

我尝试将translatez（0）添加到我的固定元素或父级，但这并没有解决我的问题。

我无法在firefox或opera中重现。

有没有人有想法？