html – 使用CSS变换(缩放)时,Webkit文本闪烁

这发生在山狮的Safari 6和最新的铬. (在OSX上确认,可能不会发生在Windows中)

请参阅此页面以举个例子:@H_403_3@

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

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

相关的CSS在下面.我不能对.out和.in类进行任何更改.只有项目类.@H_403_3@

我试过添加-webkit-backface-visibility:hidden;当我读到某个地方应该解决它,但没有任何区别.@H_403_3@

有人有线索吗?@H_403_3@

谢谢,
韦斯利@H_403_3@

.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;
}

解决方法

我面临同样的问题:我想在悬停上放大一个元素,当这样做时,页面上的每个文本都会闪烁.我也是最新的Chrome(21.0.1180.89)和OSX Mountain Lion.

其实,添加@H_403_3@

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

对受影响的元素确实解决了问题.@H_403_3@

你说你不能改变.in和.out类,但也许你可以添加另一个(.no-flicker),并在受影响的元素上使用它.@H_403_3@

注意:这似乎有助于解决Chrome中的问题,但请注意,如果您使用z定位CSS属性分层元素,则可能会导致Safari中的某些问题.例如,在我的网站上,这是导致一个CSS元素闪烁在我想要清理的动画幻灯片放映的幻灯片过渡后面.@H_403_3@

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在'',则表示换行,用''切割。
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...