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

Question

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

<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对元素的应用.如果层分开,则不再是这种情况.