Html 使用 CSS 变换（缩放）时 Webkit 文本闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12278587/
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 text flickers when using CSS transform (scale)
提问by Wesley
This happens in Safari 6 on Mountain Lion and in the latest chrome. (Confirmed on OSX, might not happen in windows)
这发生在 Mountain Lion 上的 Safari 6 和最新的 chrome 中。（在 OSX 上确认，在 Windows 中可能不会发生）
Please see this page for an example:
请参阅此页面以获取示例：
http://users.telenet.be/prullen/flicker2.html
http://users.telenet.be/prullen/flicker2.html
Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing.
在图像上快速移动鼠标并查看下面的文本。您会看到它闪烁/脉动。
The associated CSS is below. I cannot make any changes to the .outand .inclasses. Only to the item class.
相关的 CSS 如下。我无法对.out和.in类进行任何更改。仅到项目类。
I have tried adding -webkit-backface-visibility:hidden;as I read somewhere that that should fix it, but it hasn't made any difference.
我曾尝试添加，-webkit-backface-visibility:hidden;因为我在某处阅读应该修复它的地方，但它没有任何区别。
Does anyone have a clue?
有人有线索吗？
Thanks, Wesley
谢谢，韦斯利
.out {
position: relative;
display: block;
margin: 0;
border: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.in {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.item {
margin: 60px;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
}
.item:hover {
-webkit-transform: scale(1.3) !important;
-moz-transform: scale(1.3) !important;
-o-transform: scale(1.3) !important;
-ms-transform: scale(1.3) !important;
transform: scale(1.3) !important;
}
回答by lucascepeda
I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.
我面临同样的问题：我想在悬停时缩放元素，这样做时页面上的每个文本都会闪烁。我也在使用最新的 Chrome (21.0.1180.89) 和 OSX Mountain Lion。
Actually, adding
实际上，添加
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
to the affected elements doessolve the problem.
对受影响的元素确实解决了问题。
You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.
你说你不能改变 .in 和 .out 类，但也许你可以添加另一个（.no-flicker）并在受影响的元素上使用它。
Note:This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.
注意：这似乎确实有助于解决 Chrome 中的问题，但请注意，如果您的元素使用 z 定位 CSS 属性分层，则可能会导致 Safari 中出现一些问题。例如，在我的网站上，它导致 CSS 元素在我试图清理的动画幻灯片的幻灯片过渡后面闪烁。
回答by Artem Medvedev
I have the same problem, but fix it.
我有同样的问题，但修复它。
Just add the .no-flickrclass to any blinking or flickering element in your project
只需将.no-flickr类添加到项目中的任何闪烁或闪烁的元素
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
回答by flxa
I've had the same problem this morning and found that the best fix was:
今天早上我遇到了同样的问题，发现最好的解决方法是：
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
I added this to each of the two elements that make up the facesof the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.
我将此添加到构成两侧对象面的两个元素中的每一个。停止了 Chrome 中的闪烁并修复了 Safari 中显示的背面。
