小编Rob*_*rtT的帖子

我的问题是,在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技术以某种方式解决它.