这发生在山狮的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元素闪烁在我想要清理的动画幻灯片放映的幻灯片过渡后面.