防止在webkit-transform的webkit-transition中出现闪烁问题

Question

可能是重复问题:
iPhone webkit css动画导致闪烁

出现了一个奇怪的问题，就在我的webkit-transform属性动画发生之前，会有轻微的闪烁。这是我正在做的：

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

在转换发生之前，会出现闪烁。 有什么想法是怎么回事，以及我该如何解决这个问题？

谢谢！

更新：这只发生在Safari中。 它不会在Chrome中发生，尽管动画可以正常工作。

- devongovett

---

我注意到在iOS 4.2 beta 2中存在这个问题。 - rpitting

现在我在FF版本17.0上遇到了这个问题...使用缩放超出窗口大小的对象。 - vsync

某些情况下，行为总是在Chrome中。 - Maxime Lafarie

Answer 1

解决方案在这里提到：iPhone WebKit CSS animations cause flicker。

对于你的元素，你需要设置

-webkit-backface-visibility: hidden;

- rpitting

---

我的转场效果影响了网站上的其他元素，最终我不得不将该规则添加到网站上的所有元素中。 - mlunoe

在这个属性上使用通配符选择器实际上会导致其他元素出现额外的闪烁。我的解决方案是有选择地将该属性应用于正在进行翻译的元素。 - hlfcoding

还需要将它添加到父容器中。 - chovy

明智地使用-webkit-backface-visibility: hidden！我刚刚尝试将其用于带有图像的可滚动列表上，结果导致严重的帧率下降。 - mimimimichael

请勿使用通配符将属性应用于整个站点。仅在有问题的元素上谨慎使用它。这可能会极大地降低性能。 - Primus202

Answer 2

规则：

-webkit-backface-visibility: hidden;

这种方法不适用于精灵图或图片背景。

body {-webkit-transform:translate3d(0,0,0);}

这会破坏平铺背景。

我更喜欢创建一个名为“no-flick”的类并这样做：

.no-flick{-webkit-transform:translate3d(0,0,0);}

- ablemike

---

您说得对，backface-visibility 修复方案对图像背景无效。谢谢。 - ppcano

注意，当在任何地方使用translate3d（0,0,0）时，Chrome现在会破坏您可能拥有或没有的任何background-position：cover。 - pyronaur

这也是处理SVG的正确方法。 - Dillon

我遇到了类似的问题...虽然不完全相同，但在某些情况下可能会有关联。我有一个带有背景SVG的卡片翻转，其backface-visibility为hidden。在Webkit上，背景会显示直到翻转完成，然后消失。我的变换是：translateY（180deg）。为了解决Webkit中的消失问题，我必须应用transform: translateZ（-1px）translateY（180deg）;，这解决了消失问题。这是一个z-index问题，但是涉及到3D空间，而不是DOM层叠。棘手。 - KazaJhodo

Answer 3

将此CSS属性添加到闪烁的元素中：

-webkit-transform-style: preserve-3d;

（特别感谢Nathan Hoad：http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit）

- Michael Bar-Sinai

---

这很棒 - 它没有解决问题，但它强制我的代码更加严格，并使追踪实际问题变得容易找到。 - itsclarke

Answer 4

如果需要更详细的解释，请查看这篇文章：

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

我绝对会避免将其应用于整个页面。关键是要确保您计划在未来进行转换的特定元素最初以3D方式呈现，这样浏览器就不必在渲染模式之间切换。添加

-webkit-transform: translateZ(0) 

将（前面提到的）任意一个选项应用于动画元素即可实现此目的。

- Dan Tello

---

放入实际数值后这个命令就能生效：transform: translateZ(0.1px)。该命令表示将元素沿 Z 轴方向移动，移动距离为 0.1 像素。 - bob

Answer 5

我不得不使用：

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;    

在元素上加上 on，否则在页面加载后第一次发生转换时仍会出现闪烁。

- Kevin H

Answer 6

我发现将-webkit-backface-visibility: hidden;应用于正在翻译的元素，以及将-webkit-transform: translate3d(0,0,0);应用于其所有子元素后，闪烁就会消失。

- Adam Carter

Answer 7

触发有问题元素的硬件加速渲染。建议不要在 *, body 或者 html 标签上执行此操作以提高性能。

.problem{
  -webkit-transform:translate3d(0,0,0);
}

- dontmentionthebackup

Answer 8

以上两个答案都适用于我遇到的类似问题。

然而，使用body {-webkit-transform}方法会导致页面上所有元素实际上以3D方式呈现。这不是最糟糕的事情，但它略微改变了文本和其他CSS样式元素的呈现方式。

这可能是您想要的效果。如果您在页面上进行了大量转换，则可能很有用。否则，在您正在转换的元素上使用-webkit-backface-visibility:hidden是最不具侵入性的选项。

- Eric D. Fields