Webkit 不考虑溢出：以边界半径隐藏

Posted 2023-03-06

【中文标题】Webkit 不考虑溢出：以边界半径隐藏

【英文标题】：Webkit not respecting overflow:hidden with border radius

【发布时间】：2012-05-06 01:14:24

【问题描述】：

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

这一切在 Firefox 中运行良好，但 Webkit 浏览器会在裁剪区域之外留下一些子元素。

这是我的代码：

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

类名称为curvedEdges 的div 具有border-radius 和overflow:hidden。然而，“警报”文本的左右块悬挂在此半径之外，即使它们是curvedEdges 的子元素。或者用简单的英语来说，动画的左右边缘应该稍微弯曲（如在 Firefox 中），而不是笔直。

那么这是 Webkit 中的一个错误，还是我有什么问题？

如果您手边没有 Webkit 浏览器，它在 YouTube 上...

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

【问题讨论】：

对不起，关于这个话题我不能说什么，但 CSS3 实验做得很好！特别好！ :-)

非常感谢。不用 javascript 也能做到这一点当然很酷。

【参考方案1】：

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

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

border-radius; overflow: hidden, and text is not clipped

【讨论】：

是的，我怀疑这可能是最好的解决方法。当然，这确实意味着我不能再拥有透明背景，但是，嘿 - 你不能拥有一切。谢谢。

【参考方案2】：

首先，多么酷的演示！

我环顾四周，您似乎没有遇到问题。 second answer to someone else's problem 为我修复了它，尽管这对 safari 不起作用。解决方法是使用掩蔽：

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

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

【讨论】：

有趣的修复，虽然 Safari 失败是我没有给出公认答案的原因。不过还是谢谢。

适用于我的 Safari 6.0.2。

【参考方案3】：

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

<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 有边框，剪裁并不完美。

太奇怪了。

【参考方案4】：

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

【参考方案5】：

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

我能够在 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）上测试它。

【讨论】：

您不需要停止的原因是因为它默认为 alpha 蒙版，而不是亮度蒙版。您的蒙版图像完全不透明，因此它是硬边。您可以通过在 95% 左右使用完全不透明的 rbga 停止然后在 100% 完全透明来软化它。

【参考方案6】：

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

【讨论】：

感谢您的精彩破解！

谢天谢地，rotate(0) 也修复了它

【参考方案7】：

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

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

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

【讨论】：

通常，好的 ol 图形加速器没有启动。这修复了边界半径不受溢出隐藏的影响。与其说是失望不如说是令人震惊。老实说，我正在考虑使用* -webkit-transform:translateZ(0);。

【参考方案8】：

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

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

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

【讨论】：

谢谢。我花了一天时间尝试解决方案，并为我的问题派生找到最小的例子。这终于奏效了——你是英雄！