Animation Webkit不考虑溢出：使用边界半径隐藏

我有一个可爱的星际迷航红色警报动画使用CSS3。我的父元素之一具有

边框半径

以及

溢出：隐藏

，以便将任何内容裁剪为边框半径的形状

这一切在Firefox中都很好，但Webkit浏览器会在裁剪区域外留下一些子元素

这是我的密码：

类名称为

curveedges

的

div

具有

边界半径

和

溢出：隐藏

。但是，“警报”文本的左侧和右侧块悬挂在此半径之外，即使它们是

曲线边的子元素。或者简单地说，动画的左右边缘应该稍微弯曲（如Firefox），而不是笔直

那么这是Webkit中的一个bug，还是我出了什么问题

这里是YouTube，如果你手头没有Webkit浏览器

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

我为另一个关于FF3.6中类似问题的问题做了演示：

首先，这是一个多么酷的演示

我环顾了一下四周，发现问题似乎不在你身上。他们帮我修好了，虽然这对safari不起作用。解决方法是使用掩蔽：

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

同一个问题的公认答案还有另一个修正，我认为这确实可以帮助您解决问题，但我似乎无法获得元素和边框半径的正确组合。
正如提醒一样，只有当我在具有边框半径但没有边框的容器上应用遮罩时，此修正才对我有效。最终我的结局是这样的：

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

完全奇怪。
我找到了另一个解决此错误的可能方法，使用CSS3 clip path，但它只在最新版本的webkit中起作用（它似乎在Chrome 24中起作用，但在Safari 6.0.2中不起作用）。以下内容将围绕图元剪裁一个圆：

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

希望这将很快被更多的浏览器实现！这项功能似乎有很多很酷的应用。这里有一篇相关的博文：。
我一直在尝试做同样的事情，并使用边界半径将元素屏蔽为一个圆

在Safari 6.0.3中，我能够使用遮罩和径向渐变来实现所需的效果（在位置和大小上进行转换）

下面是我添加到容器（屏蔽）元素的一行代码：

我想我必须使用硬色挡块，如下所示，以获得硬边：

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

然而，它在没有（也许有人能告诉我们为什么）的情况下也是一样的。剪裁不像边界半径那样平滑，但它超出了图像的边界

您可能需要对其进行调整，以便与较早版本的Safari/Chrome等一起使用，我还没有在不同版本（也称为YMMV）上对其进行测试。
这似乎是一个浏览器问题，如上所述：

基本上，当您将动画应用于元素时，出于性能原因，浏览器将在GPU（图形处理单元）中处理动画，而其余部分由CPU处理。最终渲染遮罩上方的动画

作为一种解决方法，您可以尝试添加一个不可察觉的
变换
属性，该属性还将触发对遮罩元素的GPU处理，将其提升到动画的相同级别：

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

我猜它可能会因浏览器版本的不同而有所不同，但据报道，这些其他值也会触发GPU处理：
rotate（0）
，
translateZ（0）
这似乎是GPU/硬件合成的问题<代码>转换：translateZ（0）也应该解决这个问题。有关这方面的更多信息，请阅读

我已经包含了供应商前缀，但如果需要，您可以删除它们。
这似乎是一个混合工作修复：

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

对不起，我不能就这个话题说什么，但这是一个多么出色的CSS3实验啊！太好了！：-）非常感谢。这当然是很酷的，没有Javascript就可以完成。有趣的修复，尽管Safari失败是我没有给出公认答案的原因。不过还是要谢谢你。我在Safari 6.0.2中工作。是的，我想这可能是最好的解决方法。当然，这确实意味着我不能再拥有透明的背景，但嘿，你不能拥有一切。谢谢，谢谢你这可爱的黑客！谢天谢地，
rotate（0）
也修复了它。您不需要停止的原因是，它默认为alpha遮罩，而不是亮度遮罩。您的遮罩图像是完全不透明的，因此它是硬边。你可以在95%左右使用完全不透明的rbga停止，然后在100%左右使用完全透明。谢谢。我花了一天的时间尝试解决方案，并为我的问题推导找到最小的例子。这终于奏效了——你是个英雄！通常情况下，良好的ol图形加速器不会启动。这修复了溢出隐藏不考虑的边界半径。与其说是令人震惊，不如说是令人失望。我真的在考虑使用
*{-webkit transform:translateZ（0）；}
。
-webkit-transform: translateZ(0);
transform: translateZ(0);

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