css - 防止 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 中发生。

score 295 · Accepted Answer

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

-webkit-backface-visibility: hidden;

score 90 · Accepted Answer

规则：

-webkit-backface-visibility: hidden;

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

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

搞砸了平铺的背景。

我更喜欢创建一个名为 no-flick 的类并执行以下操作：

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

score 55 · Accepted Answer

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

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

score 20 · Accepted Answer

有关更详细的说明，请查看此帖子：

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

-webkit-transform: translateZ(0)

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

score 17 · Accepted Answer

我不得不使用：

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

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

score 14 · Accepted Answer

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

score 7 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

8 回答 8