Webkit的不尊重溢出：隐藏与边框半径(Webkit not respecting overflo

我使用CSS3可爱的星际红警动画。我的一个父元素都有一个border-radius沿overflow:hidden ，这样任何内容被裁切为圆角半径的形状。

这一切工作正常在Firefox，但WebKit浏览器留下一些子元素挂裁剪区域之外。

这里是我的代码：

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

该div与类名curvedEdges有border-radius和overflow:hidden 。然而块离开了“警报”文本挂这个半径之外的与正确的，即使它们的子元素curvedEdges 。或用简单的英语，动画的左，右边缘应稍弯曲（如火狐），而不是直奔死角。

因此，这是在Webkit的一个bug，或者有我有什么不对？

这是YouTube上的，如果你没有一个WebKit浏览器方便...

http://www.youtube.com/watch?v=3vyVy21nWsE

Answer 1:

你可以把一个绝对定位的div在它与一个边界半径和厚厚的黑色边框，它会阻止你想太多被隐藏的部分。

我做了一个演示约在FF3.6类似的问题另一个问题： http://jsfiddle.net/vfp3v/15/

边界半径; 溢出：隐藏，和文字不会被截断

Answer 2:

首先，那叫一个爽试玩！

我周围一看，它似乎不是一个问题，在您有。在第二个回答别人的问题固定的，对我来说，虽然这并不对野生动物园的工作。解决方法是使用屏蔽：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

接受的答案同样的问题还有另外一个修正，我认为真的可以帮助你，但我似乎无法得到元素和边界半径的正确组合。

Answer 3:

我一直试图做同样的，并使用边界半径，以掩盖元素圆。

我能够使用掩蔽和径向梯度，以实现在Safari 6.0.3所需影响（在位置和大小的转换）。

下面是我添加到容器（掩蔽）元件一行代码：

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

我想我将不得不使用硬色标，具体如下，以获得硬边：

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

然而，它的工作原理一样没有（也许有人可以启发我们为什么）。裁剪不如边框圆角平滑，但它击败赫克了不可预测超过范围的图像。

您可能需要调整这个用于与旧版本的Safari /铬等，我没有测试过不同版本（又名因人而异）的。

Answer 4:

这似乎是一个浏览器的问题，因为报道： https://code.google.com/p/chromium/issues/detail?id=157218

基本上，当你应用动画元素，浏览器将处理它的GPU（图形处理单元）性能方面的原因，而其余的是由CPU来处理。这最终使面膜上面的动画。

作为一种变通方法，您可以尝试添加一个潜移默化的transform属性，这也将引发GPU处理的面具元件，它推动到动画的同级别：

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

我想这可能因浏览器的版本有所不同，但这些价值观也有报道引发GPU处理： rotate(0) translateZ(0)

Answer 5:

这似乎是其与GPU /硬件合成的问题。 transform: translateZ(0); 要解决这个问题为好。更多这方面的信息，请阅读http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

-webkit-transform: translateZ(0);
transform: translateZ(0);

我已经包括了供应商的前缀，但如果你愿意，你可以删除它们。

Answer 6:

好像它的混合工作修复：

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Answer 7:

正如抬起头，此修复程序只工作对我来说，如果我申请边框圆角的容器上的面具，但没有边界。最后，我结束了这样的事情：

<div style="border-radius: 15px; border: 1px solid red;">
    <div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
        <span style="position: relative; left; -20px;">Some stuff that overflows.</span>
    </div>
</div>

与内格边框，裁剪是不完美的。

完全不可思议。

Answer 8:

我发现了另一个可能的解决这个bug，使用CSS3夹路径，但它只是在最近版本的WebKit的工作（这似乎在Chrome 24的工作，但不是Safari浏览器6.0.2）。下面将剪辑元件的周围的圈子：

-webkit-clip-path: circle(50%, 50%, 100%);

希望这将通过更多的浏览器很快就会实现！这似乎是这个功能可以有很多很酷的应用程序。这里有一个相关的博客文章： http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/ 。

文章来源: Webkit not respecting overflow:hidden with border radius