使用CSS转换时,Webkit文本闪烁(缩放)

Question

这种情况发生在Mountain Lion上的Safari 6和最新的chrome中.(在OSX上确认,可能不会在Windows中发生)

请参阅此页面以获取示例:

http://users.telenet.be/prullen/flicker2.html

快速移动鼠标图像并查看下面的文本.你会看到它闪烁/脉动.

相关的CSS如下.我不能对.out和.in类进行任何更改.仅限于项目类.

我尝试添加,-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;
}

Answer 1

我面临同样的问题:我想在悬停时缩放元素,当这样做时,页面上的每个文本都会闪烁.我也是最新的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元素在我试图清理的动画幻灯片放映的幻灯片过渡后面闪烁.

Answer 2

我有同样的问题,但修复它.请参阅http://codepen.io/artemmedvedev/pen/uLwvo

只需将.no-flickr类添加到项目中任何闪烁或闪烁的元素即可

.no-flickr {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
} 

Answer 3

我今天早上遇到了同样的问题,发现最好的解决办法是:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

我将此添加到构成双面对象面的两个元素中的每一个.停止Chrome中的闪烁并修复Safari中显示的背面.