CSS 转换错误：缩放和溢出：隐藏在 Chrome 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16687023/
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
Bug with transform: scale and overflow: hidden in Chrome
提问by Jake Blues
Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div overflow: hiddenand border-radius, the child div extended the beyond of parent div.
使用 CSS3 属性transform: scale，我发现了有趣的问题。我想为图片做一点缩放效果。但是当我用于父 divoverflow: hidden和 时border-radius，子 div 扩展了父 div 的范围。
Update:
更新：
Problem isn't solved. If I add transition, is still doesn't work. I tried to solve this issue, but without success.
问题没有解决。如果我添加transition，仍然不起作用。我试图解决这个问题，但没有成功。
Here is a demo
这是一个演示
采纳答案by andyb
It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent;to your .wrapclass to workaround the problem.
这是基于 Webkit 的浏览器中的一个已知错误 - 请参阅#62363。您可以将 a 添加border:1px solid transparent;到您的.wrap班级以解决该问题。
For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flagsand using the --ignore-gpu-blacklistflag fixes it in Chrome 29 (which just hit the Chrome dev channel today).
对于更新后的需求，使用 向元素添加过渡border-radius，这是另一个已知的 Chomre/Webkit 错误#157218。抱歉，但仍然没有已知的通用解决方法，尽管对该错误的一个评论说使用chrome://flags和 使用该--ignore-gpu-blacklist标志可以在 Chrome 29（今天刚刚访问 Chrome 开发者频道）中修复它。
回答by Ken
The transparent border did not worked for me but to change the z-index of .wrap div and image worked (in my case, image is in fact a video)
透明边框对我不起作用，但可以更改 .wrap div 和图像的 z-index（在我的情况下，图像实际上是视频）
Here is the css:
这是CSS：
.videoContainer{
overflow: hidden;
z-index: 10;
}
video{
margin-left: -55%;
transform: scale(-1,1);
-webkit-transform: scale(-1,1);
-moz-transform: scale(-1,1);
z-index: 0;
}
NOTE: see Jake Blues comment below concerning the necessity to have positioned element for enabling z-index to work properly.
注意：请参阅下面的 Jake Blues 评论，关于定位元素以使 z-index 正常工作的必要性。
回答by lefoy
transform: translateZ(0);on the wrap element did the trick for me.
transform: translateZ(0);在 wrap 元素上对我有用。
See CSS performance relative to translateZ(0)for more information about this technique.
有关此技术的更多信息，请参阅与 translateZ(0) 相关的 CSS 性能。
回答by Mike Shema
Both ways of solving this issuer worked fine:
解决这个问题的两种方法都很好：
Add the following line to a parent wrapper (
z-index: 0is not necessary for the image itself):position: relative; z-index: 10Or add
transform: translateZ(0);to a parent wrapper (with the corresponding prefixes for better browser support)
将以下行添加到父包装器（
z-index: 0图像本身不需要）：position: relative; z-index: 10或者添加
transform: translateZ(0);到父包装器（带有相应的前缀以获得更好的浏览器支持）
回答by Jonathan Marzullo
This happens due to composited layers not being clipped by their parent layers. So sometimes you need to bring the parent with overflow:hiddenonto its own compositing layer so it can apply overflow:hiddencorrectly.
发生这种情况是因为合成图层没有被其父图层剪裁。因此，有时您需要将父对象带入overflow:hidden其自己的合成层，以便它可以overflow:hidden正确应用。
So you must add the CSS property transform: translateZ(0)to the parent element of your transformed element.
因此，您必须将 CSS 属性添加transform: translateZ(0)到已转换元素的父元素。
/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
Then overflow:hiddenwill work due to having the transformed element be composited on its own rendering layer like its transformed child.
overflow:hidden由于将转换后的元素像其转换后的子元素一样在其自己的渲染层上合成，然后将起作用。
Tested on latest Safari and Chrome on iOS and non iOS devices
在 iOS 和非 iOS 设备上的最新 Safari 和 Chrome 上测试
回答by Yousef Salimpour
Strangely I just ran into this problem after upgrading to Chrome 65, and for me adding will-change: transform;to the IFRAME styles did the trick.
奇怪的是，我在升级到 Chrome 65 后就遇到了这个问题，对我来说，添加will-change: transform;到 IFRAME 样式就成功了。
回答by bob blunt
sorry for my poor English.
对不起我糟糕的英语。
if the page isn't have positioned element, there is no need to set container element and child element z-index attribute both.
如果页面没有定位元素，则不需要同时设置容器元素和子元素的 z-index 属性。
just adding z-index: 0(or other) attribute to container element.
只需将 z-index: 0（或其他）属性添加到容器元素。
.container {
border-radius: .14rem;
overflow: hidden;
z-index: 0;
}
.child {
}
回答by dyad
I had a similar issue with the latest version of Chrome 65. I have an iFrame video scaled larger using transform: scale() in a div, and on the latest Chrome version, it was no longer masked on the sides and was popping out of the parent container, even with overflow: hidden;
我在最新版本的 Chrome 65 中遇到了类似的问题。我在 div 中使用 transform: scale() 放大了一个 iFrame 视频，而在最新的 Chrome 版本中，它的侧面不再被屏蔽，而是从父容器，即使有溢出：隐藏；
While translateZ sort of helped, it was only when I used translateX on the parent instead did it mask the width properly:
虽然 translateZ 有点帮助，但只有当我在父级上使用 translateX 而不是它正确屏蔽宽度时：
transform:translateX(0);
回答by Nitesh
Here is the Solution.
这是解决方案。
The HTML:
HTML：
<div class="wrap">
<div class="image"></div>
</div>
The CSS:
CSS：
.wrap{
width: 400px;
height: 260px;
overflow: hidden;
border-radius: 15px;
border:1px solid transparent;
}
div.image{
background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
width: 400px;
height: 260px;
}
div.image:hover{
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
cursor: pointer;
border:1px solid transparent;
}
Chrome needs a transparent bordersurrounding the box.
Hope this helps.
Chrome 需要border在盒子周围透明。希望这可以帮助。
回答by paul
The bug still exists in webkit Browsers (Safari and Chrome under iOS) when the mask is scaled. And then all the workarounds above do not work. But using the non standard css property -webkit-mask-box-imagehelps for scaled masks as well.
缩放遮罩时，该错误仍然存在于 webkit 浏览器（iOS 下的 Safari 和 Chrome）中。然后上面的所有解决方法都不起作用。但是使用非标准 css 属性-webkit-mask-box-image 也有助于缩放蒙版。
