CSS Webkit 不考虑溢出：用边框半径隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10314207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit not respecting overflow:hidden with border radius
提问by JohnW
I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radiusalong with overflow:hiddenso that any content is cropped to the shape of the border radius.
我有一个使用 CSS3 的可爱的星际迷航红色警报动画。我的一个父元素有一个border-radiuswith ，overflow:hidden以便将任何内容裁剪为边框半径的形状。
This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.
这在 Firefox 中一切正常，但 Webkit 浏览器会在裁剪区域外留下一些子元素。
Here is my code:
这是我的代码：
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
The divwith the class name curvedEdgeshas the border-radiusand overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.
在div与类名curvedEdges有border-radius和overflow:hidden。然而，“警报”文本左侧和右侧的块挂在此半径之外，即使它们是curvedEdges. 或者用简单的英语，动画的左右边缘应该稍微弯曲（如在 Firefox 中），而不是完全笔直。
So is this a bug in Webkit, or have I got something wrong?
那么这是 Webkit 中的错误，还是我做错了什么？
Here it is on YouTube if you don't have a Webkit browser handy...
如果您手边没有 Webkit 浏览器，它就在 YouTube 上...
采纳答案by Willem
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
你可以在它上面放置一个绝对定位的 div，它带有一个边框半径和一个粗黑边框，它会阻止你想要隐藏的部分。
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
我为另一个关于 FF3.6 中类似问题的问题做了一个演示：http: //jsfiddle.net/vfp3v/15/
回答by cchana
Firstly, what a cool demo!
首先，多么酷的演示！
I had a look around and it seems a problem not on you are having. The second answer to someone else's problemfixed it for me, although this doesn't work for safari. The fix is to use masking:
我环顾四周，似乎不是你遇到的问题。别人问题的第二个答案为我解决了这个问题，尽管这对 safari 不起作用。解决方法是使用掩码：
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.
对同一问题的公认答案有另一个解决方法，我认为这确实可以帮助您解决问题，但我似乎无法获得元素和边界半径的正确组合。
回答by bschnur
I'd been trying to do the same, and was using border-radius to mask elements to a circle.
我一直在尝试做同样的事情，并使用 border-radius 将元素屏蔽为圆形。
I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).
我能够在 Safari 6.0.3 中使用遮罩和径向渐变来实现所需的效果（位置和大小的转换）。
Here's the single line of code I added to the container (masking) element:
这是我添加到容器（屏蔽）元素的单行代码：
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
I thought I would have to use hard color stops, as follows, to get the hard edge:
我想我将不得不使用硬色标，如下所示，以获得硬边：
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.
但是，它的工作原理相同（也许有人可以启发我们解释原因）。裁剪不像 border-radius 那样平滑，但它意外地超出了图像的边界。
You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).
您可能需要调整它以与旧版本的 Safari/Chrome 等一起使用，我还没有在不同版本（又名 YMMV）上对其进行测试。
回答by Hugo Silva
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
它似乎是一个浏览器问题，报告如下：https: //code.google.com/p/chromium/issues/detail?id=157218
Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.
基本上，当您将动画应用于元素时，出于性能原因，浏览器将在 GPU（图形处理单元）中处理它，而其余部分由 CPU 处理。最终渲染蒙版上方的动画。
As a workaround you can try adding an imperceptible transformproperty, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:
作为一种解决方法，您可以尝试添加一个难以察觉的transform属性，这也将触发遮罩元素的 GPU 处理，将其提升到动画的同一级别：
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)
我想这可能因浏览器的版本有所不同，但这些数值也被报道触发GPU处理：rotate(0)，translateZ(0)
回答by Zander
It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0);should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
这似乎是 GPU/硬件合成的问题。transform: translateZ(0);也应该解决这个问题。有关这方面的更多信息，请阅读http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
I have included vendor prefixes but you can remove them if you want.
我已经包含了供应商前缀，但您可以根据需要删除它们。
回答by nakrill
Seems its a mixed working fix:
似乎它是一个混合工作修复：
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
回答by Skone
Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:
提醒一下，如果我将蒙版应用到具有边框半径但没有边框的容器上，则此修复仅对我有用。最终我得到了这样的结果：
<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>
With a border on the inner div, the clipping wasn't perfect.
在内部 div 上有边框，剪辑并不完美。
Totally weird.
完全奇怪。
回答by lakenen
I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:
我找到了另一个解决此错误的可能方法，即使用 CSS3 剪辑路径，但它仅适用于最新版本的 webkit（它似乎适用于 Chrome 24，但不适用于 Safari 6.0.2）。以下将在元素周围剪辑一个圆圈：
-webkit-clip-path: circle(50%, 50%, 100%);
Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.
希望这将很快被更多浏览器实现！看起来这个功能可以有很多很酷的应用程序。这是一篇相关的博客文章：http: //blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/。
