使用CSS变换（缩放）时，Webkit文本会闪烁

Question

这在 Mountain Lion 上的 Safari 和最新版的 Chrome 中会发生。 (已确认在 Mac OS 上出现，可能在 Windows 上不会出现)

请参考此页面的示例：

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

快速将鼠标移动到图像上并迅速移开，观察下方的文本。你会看到它闪烁/脉动。

相关的 CSS 如下。我不能对.out和.in类进行任何更改，只能针对item类进行更改。

我尝试添加-webkit-backface-visibility:hidden;，因为我在某个地方读到应该可以解决问题，但没有任何改变。

有人有想法吗？

谢谢， Wesley

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

- user429620

---

在 Win7 上的 Chrome 中看起来很好，你尝试过使用其他浏览器吗？ - PhonicUK

我刚在browserstack.com上进行了测试 - 看起来这只发生在Mountain Lion（osx）上。 - user429620

在Mountain Lion上，这种情况是在所有浏览器中发生吗？还是只有Safari /所有基于Webkit的浏览器？ - PhonicUK

实际上，我让别人自己测试了一下，在 Lion 上也出现了这个问题。可能只是在 OSX 上出现。在 Firefox 中不会发生。Chrome/Safari 中也不会。 - user429620

听起来像是Webkit中的硬件加速问题。这可能值得用作测试案例并报告错误。 - PhonicUK

@PhonicUK - 我想我找到了一个现有的错误报告：https://bugs.webkit.org/show_bug.cgi?id=23364 -- 这是从2009年开始未解决的。如果有人知道解决方法，我会非常感激，因为按照现在的情况，等待Webkit团队修复这个问题可能需要再等几年！谢谢。 - user429620

Answer 1

我遇到了同样的问题：我想要在鼠标悬停时对一个元素进行缩放，但是这样做会导致页面上的所有文字闪烁。我使用的是最新版的Chrome (21.0.1180.89) 和OSX Mountain Lion操作系统。

实际上，添加以下CSS属性可以解决这个问题：

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

对受影响的元素进行添加一个.no-flicker类别并将其应用到元素中，这确实可以解决问题。

你说你不能更改.in和.out类，但也许你可以添加另一个类(.no-flicker)并将其用于受影响的元素。

注意：这确实可以帮助修复Chrome中的问题，但是请注意如果您在Safari中使用z定位CSS属性对元素进行分层处理可能会导致一些问题。例如，在我的网站上，它会导致一个CSS元素在我试图清理的动画幻灯片转换的背后闪烁。

- lucascepeda

---

谢谢。每次我都很惊讶，一个看起来模糊的问题(-我在谷歌上搜索了“chrome transition scale moves”-)在社区网络的时代中如此迅速地得到解决。向谷歌致敬。 - Lorenz Lo Sauer

Answer 2

我遇到了同样的问题，但已经解决了。

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

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

- Artem Medvedev

Answer 3

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

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

我将这一段代码添加到了构成双面物体的两个元素中。这样可以解决Chrome浏览器中的闪烁问题并修复Safari浏览器中显示背面的问题。

- flxa

---

-webkit-transform-style: preserve-3d; 隐藏了我的页面上的所有内容。 -webkit-backface-visibility: hidden; 的确有帮助，但这是在以前的回答中提到的。我发现你的答案令人困惑。 - avs099

实际上，在我的上一个项目中，“preserve-3d”解决了-webkit-滚动条在我悬停在内联块元素上时跳来跳去的问题，该元素具有对其内部标题进行缩放（放大）效果的on:hover事件。我猜保留3D有助于保持元素的原始边界，特别是在使用一组紧密排列的内联块项目单元格网格时... - Abbey

使用透视和缩放处理时，所有相对定位的div/li元素开始闪烁。在父容器（包含变换和缩放的容器）中添加preserve-3d可以停止这种令人讨厌的闪烁。谢谢。 - Lahmizzar

谢谢，这是完美的解决方案！ - Bjorn