19

我有一个使用 CSS3 的可爱的星际迷航红色警报动画。我的一个父元素有一个border-radiuswith ，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

4

8 回答 8

33

首先，多么酷的演示！

我环顾四周，您似乎没有遇到问题。别人的问题的第二个答案为我解决了这个问题，尽管这对 safari 不起作用。解决方法是使用掩蔽：

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

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

于 2012-04-25T11:44:13.570 回答
17

我一直在尝试做同样的事情，并且正在使用边界半径将元素掩盖为一个圆圈。

我能够在 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/Chrome 等一起使用，我没有在不同版本（又名 YMMV）上测试它。

于 2013-04-19T16:47:03.717 回答
16

据报道，这似乎是浏览器问题：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)

于 2013-08-06T13:43:37.507 回答
9

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

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

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

于 2014-03-11T14:44:11.287 回答
4

似乎它是一个混合的工作修复：

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

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

于 2014-05-19T10:30:37.197 回答
2

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

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

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

于 2012-04-25T11:42:36.843 回答
1

提醒一下，此修复仅适用于我将蒙版应用到具有边框半径但没有边框的容器上。最终我得到了这样的结果：

<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>

内部 div 上有边框，剪裁并不完美。

完全奇怪。

于 2012-10-10T16:05:34.197 回答
1

我找到了另一个可能的解决方案，使用 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/ 。

于 2013-02-06T21:01:31.580 回答