使用CSS变换(缩放)时Webkit文本闪烁
这发生在Mountain Lion上的Safari6和最新的chrome中。(在OSX上已确认，在windows中可能不会发生)
有关示例，请参阅此页面：
http://users.telenet.be/prullen/flicker2.html
快速将鼠标移到图像上或移出图像，然后查看下面的文本。你会看到它在闪烁/跳动。
关联的CSS如下所示。我不能对.out和.in类进行任何更改。仅限于item类。
我试着添加-webkit-backface-visibility:hidden;，因为我在某处读到应该可以修复它，但它没有任何作用。
有谁有线索吗？
谢谢，韦斯利
.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;
}回答 3
Stack Overflow用户
发布于 2012-09-12 05:06:15
我正面临着同样的问题:我想在悬停时缩放一个元素，当这样做时，页面上的每个文本都会闪烁。我也在使用最新的Chrome (21.0.1180.89)和OSX Mountain Lion。
实际上，添加
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;对于受影响的元素，确实用解决了问题。
您说您不能更改.in和.out类，但也许您可以添加另一个(.no-flicker)并在受影响的元素上使用它。
注意:这似乎确实有助于解决Chrome中的问题，但请注意，如果您有带有z定位CSS属性的元素层，则可能会在Safari中导致一些问题。例如，在我的网站上，它导致CSS元素在我试图清理的动画幻灯片放映的幻灯片转场后面闪烁。
Stack Overflow用户
发布于 2014-08-27 07:06:24
我也有同样的问题，但是要解决它。
只需将.no-flickr类添加到项目中任何闪烁或闪烁的元素
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}Stack Overflow用户
发布于 2013-01-15 07:49:04
今天早上我也遇到了同样的问题，我发现最好的解决方法是：
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;我将其添加到组成双面对象的faces的两个元素中。停止了Chrome中的闪烁，并修复了Safari中的背面显示。
https://stackoverflow.com/questions/12278587
复制相似问题