Chrome错误 - 与css转换结合使用时，边框半径不会剪切内容

Question

我的问题是，在CSS过渡期间，如果重叠元素的转换涉及border-radius，则transform暂时停止剪切元素。在我的情况下，我有两个div绝对定位在另一个之上，其中第一个转换由第二个内部导航元素的操作触发，例如：

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

上面的 <{em} div有border-radius: 50%并剪切 nav 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。如果层分开，则不再是这种情况。