28

这发生在 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;
}
4

3 回答 3

45

我面临同样的问题：我想在悬停时缩放元素，这样做时页面上的每个文本都会闪烁。我也在使用最新的 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 元素在我试图清理的动画幻灯片的幻灯片转换后面闪烁。

于 2012-09-11T21:06:14.803 回答
13

我有同样的问题，但解决它。

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

.no-flickr {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
于 2014-08-26T23:06:23.820 回答
6

今天早上我遇到了同样的问题，发现最好的解决方法是：

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

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

于 2013-01-14T23:49:03.967 回答