防止 webkit-transform 的 webkit-transition 闪烁 [重复]答案

【问题标题】：Prevent flicker on webkit-transition of webkit-transform [duplicate]防止 webkit-transform 的 webkit-transition 闪烁 [重复]
【发布时间】：2011-03-28 13:09:17
【问题描述】：

可能重复：
iphone webkit css animations cause flicker

由于某种原因，就在我的 webkit-transform 属性动画出现之前，有轻微的闪烁。这是我正在做的事情：

CSS：

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

JavaScript：

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

就在过渡发生之前，有一个闪烁。知道为什么会这样，我该如何解决这个问题？

谢谢！

更新：这只发生在 Safari 中。尽管动画确实有效，但它不会在 Chrome 中发生。

【问题讨论】：

我注意到 iOS 4.2 beta 2 中的问题。
现在在 FF 版本 17.0 上发生在我身上......缩放的对象超出了窗口的大小
在某些情况下始终在 Chrome 中的行为...

标签： css css-transitions css-transforms

【解决方案1】：

将此css属性添加到正在闪烁的元素：

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

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

【讨论】：

这很好 - 它并没有解决问题，但它确实迫使我的代码更加严格，并且让追踪实际问题变得容易。

【解决方案2】：

我发现将-webkit-backface-visibility: hidden; 应用于翻译元素并将-webkit-transform: translate3d(0,0,0); 应用于其所有子元素，然后闪烁消失

【讨论】：

【解决方案3】：

为有问题的元素触发硬件加速渲染。我建议不要在 *、body 或 html 标签上这样做以提高性能。

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

【讨论】：

【解决方案4】：

我不得不使用：

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

在元素上，否则在页面加载后第一次发生转换时我仍然会得到一个 flickr

【讨论】：

【解决方案5】：

更详细的解释，看看这篇文章：

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

我绝对会避免将它应用于整个身体。关键是要确保您计划在未来转换的任何特定元素都以 3d 形式呈现，这样浏览器就不必切换进出渲染模式。添加

-webkit-transform: translateZ(0)

（或已经提到的任何一个选项）动画元素将完成此操作。

【讨论】：

这在将实际值放入后起作用：transform: translateZ(0.1px)

【解决方案6】：

规则：

-webkit-backface-visibility: hidden;

不适用于精灵或图像背景。

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

搞砸平铺的背景。

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

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

【讨论】：

你是对的，背面可见性修复不适用于图像背景。谢谢。
注意，当使用 translate3d(0,0,0) anywhere Chrome 现在会破坏任何背景位置：您可能拥有或不拥有的封面。
这也是使用 SVG 的方式。
我遇到了类似的问题......它不完全相同，但我可以看到它在某些情况下是相关的。我有一个卡片翻转，背面有一个背景 svg，背面可见性：隐藏。在 webkit 上，背景会一直显示到翻转完成，然后消失。我的变换是：translateY(180deg)。要修复 webkit 中的消失问题，我必须应用 transform: translateZ(-1px) translateY(180deg);，这解决了消失问题。 z-index 问题，但与 3d 空间有关，而不是 dom 分层。棘手。

【解决方案7】：

以上两个答案都对我有类似的问题。

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

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

【讨论】：

【解决方案8】：

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

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

-webkit-backface-visibility: hidden;

【讨论】：

我的转换影响了网站上的其他元素，最后我不得不将规则添加到网站上的所有元素中。
对该属性使用通配符选择器实际上会导致其他元素的额外闪烁。我的工作解决方案是选择性地将属性应用于正在翻译的元素。
也必须将其添加到父容器中。
使用-webkit-backface-visibility: hidden;明智的！我只是尝试在带有图像的可滚动列表上使用它，结果导致严重的帧率下降。
请不要使用通配符将属性应用到您的整个网站。在麻烦的元素上谨慎使用它。它会大大降低性能。