Chrome错误 - 当与css转换结合时，边框半径不会剪切内容 [英] Chrome bug - border radius not clipping contents when combined with css transition

问题描述

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

My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:

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

div 有 border-radius：50％，并剪辑 nav div 。在CSS中，它像（最小示例，原始 onclick 操作说明为：hover ）：

The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :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技术解决方法。

Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration. This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.

推荐答案

发现解决方案。有时简单的是最难找到的。在这种情况下， #above {z-index：1;} （例如 http： //jsfiddle.net/UhAVG/1/ ）解决了这个问题。通常的猜测是 z-index 阻止了一些优化，结合单层操作，这样做会错误地优化应用 border-radius on元素。使用层分隔不再是这种情况。

After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.

这篇关于Chrome错误 - 当与css转换结合时，边框半径不会剪切内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！