Webkit不尊重溢出:隐藏边框半径

Question

我有一个可爱的星际迷航红色警报动画使用CSS3.我的一个父元素有一个border-radius,overflow:hidden所以任何内容都被裁剪为边框半径的形状.

这一切在Firefox中运行良好,但Webkit浏览器会将一些子元素悬挂在裁剪区域之外.

这是我的代码:

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

在div与类名curvedEdges有border-radius和overflow:hidden.但是,"警报"文本左右两侧的块悬挂在此半径之外,即使它们是子元素curvedEdges.或者用简单的英语,动画的左右边缘应略微弯曲(如在Firefox中),而不是直线.

那么这是Webkit中的一个错误,还是我出错了？

如果您没有方便的Webkit浏览器,它就在YouTube上...

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

Answer 1

首先,这是一个很酷的演示!

我环顾四周,似乎问题不在于你.在第二个回答别人的问题固定的,对我来说,虽然这并不对野生动物园的工作.修复是使用掩码:

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

对同一个问题的接受答案有另一个解决方案,我认为这可以真正帮助你,但我似乎无法得到正确的元素组合和border-radius.

Answer 2

我一直试图这样做,并使用border-radius将元素屏蔽为圆形.

我能够使用遮罩和径向渐变来在Safari 6.0.3中实现所需的效果(具有位置和大小的过渡).

这是我添加到容器(masking)元素的单行代码:

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

我认为我必须使用硬色停止,如下所示,以获得硬边:

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

但是,它没有相同的工作(也许有人可以启发我们的原因).剪辑不像border-radius那样平滑,但是它不可预测地超出边界而超出了图像.

你可能需要调整它以便与旧版本的Safari/Chrome等一起使用,我还没有在不同版本(也就是YMMV)上测试它.

Answer 3

它似乎是报告的浏览器问题: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 4

这似乎是GPU /硬件合成的一个问题.transform: translateZ(0);也应该解决这个问题.有关这方面的更多信息,请阅读http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

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

我已经包含了供应商前缀,但您可以根据需要删除它们.

Answer 5

您可以在其上放置一个绝对定位的 div，并带有边框半径和粗黑色边框，它会遮挡您想要隐藏的部分。

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

边界半径；溢出：隐藏，文本不被剪切