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

概述这发生在山狮的Safari 6和最新的铬. (在OSX上确认,可能不会发生在Windows中) 请参阅此页面以举个例子： http://users.telenet.be/prullen/flicker2.html 快速地将鼠标移动到图像上并查看下面的文本.你会看到它闪烁/脉动. 相关的CSS在下面.我不能对.out和.in类进行任何更改.只有项目类. 我试过添加-webkit-backface-v 这发生在山狮的Safari 6和最新的铬. (在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;}

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

总结

以上是内存溢出为你收集整理的html – 使用CSS变换(缩放)时,Webkit文本闪烁全部内容，希望文章能够帮你解决html – 使用CSS变换(缩放)时,Webkit文本闪烁所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。