Chrome 错误 - 与 CSS 过渡结合使用时，边框半径不会剪切内容

Question

我的问题是，如果在重叠元素的过渡涉及transform，则在CSS过渡期间border-radius暂时停止剪辑内部的元素。就我而言，我有两个div绝对位于另一个之上，其中第一个通过单击第二个导航元素的操作触发过渡，例如：

<div id="below"></div>
<div id="above"><div id="nav"></div></div>

上面的div border-radius: 50%并剪辑了导航div。在CSS中，它是这样的（最小示例，原始onclick动作表示为:hover）：

#below {
    position: absolute; width: 250px; height: 250px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#below:hover {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#above {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
#nav {
    width: 40px;
    height: 200px;
    background-color: rgba(0,0,0,0.3);
}

当然，在 http://jsfiddle.net/UhAVG/中，它更明显，有一些额外的样式以获得更好的插图。这在IE10+和FF25中按预期工作，在禁用硬件加速的Chrome 31和32中也是如此。结果，只有加速的Chrome才会显示这种不需要的行为。所以我想知道是否可以使用当前的 CSS3 技术以某种方式解决它。

Answer 1

经过更多的实验，我终于找到了解决方案。有时简单的是最难找到的。在这种情况下，#above {z-index: 1;}（如 http://jsfiddle.net/UhAVG/1/）解决了问题。疯狂的猜测是，z-index阻止了一些组合单层操作的优化，这样做错误地优化了对元素的应用border-radius。层分离后，情况不再如此。