CSS 使用任何动画/过渡时的 Webkit 边界半径和溢出错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14383632/
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 border-radius and overflow bug when using any animation/transition
提问by Dustin
I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it. The div has a border radius and overflow set to hidden. When I hover over the img I have a transition that takes place which makes the image larger to create a zooming effect. The problem is that the overflow seems to break on the bottom left and bottom right of the image.
我有收到一个奇怪的错误，当我使用的组合overflow，border-radius和transition。我有一个里面有 img 的 div。div 的边框半径和溢出设置为隐藏。当我将鼠标悬停在 img 上时，我会发生一个过渡，使图像变大以创建缩放效果。问题是溢出似乎在图像的左下角和右下角中断。
I have created a jsfiddle for you to see what I'm talking about. http://jsfiddle.net/dmcgrew/HuMrC/1/
我已经为你创建了一个 jsfiddle 来看看我在说什么。http://jsfiddle.net/dmcgrew/HuMrC/1/
It works fine in Firefox but breaks in Chrome and Safari.
它在 Firefox 中运行良好，但在 Chrome 和 Safari 中会中断。
Anyone know what might be causing this or how to fix it?
任何人都知道可能导致此问题的原因或如何解决？
采纳答案by mikevoermans
I don't know if I'm understanding the problem correctly as the image isn't loading. If you add height: 100%;to .inner_blockdoes it help your issue?
由于图像未加载，我不知道我是否正确理解了问题。如果您添加height: 100%;到.inner_block它帮助您的问题？
回答by HandiworkNYC.com
I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin).
我有同样的问题。将此添加到父容器为我解决了它（这是一个 LESS 混合）。
.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
}
回答by Rijo
I added minus z-index value for image and higher value for parent
我为图像添加了负 z-index 值，为父级添加了更高的值
li {z-index:10; overflow: hidden;}
li img {z-index: -10;}
回答by bschnur
The accepted answer didn't work for me because I can't have the clear border increasing the clickable area of the masked element, nor do I want it to obscure that of other elements (and setting the height to 100% didn't solve the issue).
接受的答案对我不起作用，因为我不能让清晰的边框增加被屏蔽元素的可点击区域，我也不希望它掩盖其他元素的可点击区域（并将高度设置为 100% 没有解决问题）。
See my answer to a related questionfor a possible solution.
有关可能的解决方案，请参阅我对相关问题的回答。
回答by mateostabio
I've had an issue in the past like this while trying to zoom into a photo inside a div. I fixed it by adding rotation scale(1.05) rotate(0.02deg)to the scale transform
(It actually removed the glitchy lines)
我过去在尝试放大 div 内的照片时遇到过这样的问题。我通过scale(1.05) rotate(0.02deg)在缩放变换中添加旋转来修复它（它实际上消除了毛刺线）
My issue today is getting the glitch lines off a translateY div hover effect. Surprisingly enough, I got rid of them by removing overflow: hidden;
我今天的问题是从 translateY div 悬停效果中去除故障线。令人惊讶的是，我通过删除它们来摆脱它们overflow: hidden;
Hopefully this helps future debuggers.
希望这有助于未来的调试器。
回答by Azhar
I have faced this issue on Safari(It's a known bug in safari); fixed by applying -webkit-mask-imageand it work for me perfectly. cheers
我在 Safari 上遇到过这个问题（这是 safari 中的一个已知错误）；通过申请修复-webkit-mask-image，它对我来说完美无缺。干杯
.block{
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
回答by borisdiakur
Here is what helped me:
以下是对我的帮助：
img {
border: solid 2px transparent;
}
回答by Mr. Ortiizz
The above answer worked for me, but with a little tweak;
上面的答案对我有用，但稍作调整；
border: solid 0px transparent;
