google-chrome - Chrome 错误 - 与 css 过渡结合使用时，边框半径不会剪裁内容

Question

我的问题是，在 CSS 过渡期间，如果重叠元素的过渡涉及 transform，border-radius 会暂时停止剪裁内部元素。在我的例子中，我有两个 div，一个绝对定位在另一个之上，其中第一个具有通过单击第二个内的导航元素的操作触发的转换，例如:

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

上面的 div 有border-radius: 50% 并且剪辑nav div。在 CSS 中它是这样的(最小的例子，原始的 onclick Action 说明为 :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 。随着层的分离，情况不再如此。