Css 防止webkit转换的webkit转换闪烁

可能重复：

出于某种原因，就在webkit transform属性的动画出现之前，有一个轻微的闪烁。以下是我正在做的：

CSS:

JavaScript:

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

就在转换发生之前，有一个闪烁。你知道这是为什么吗？我如何解决这个问题

谢谢

---

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

这里提到了解决方案：

对于元素，需要设置

-webkit-backface-visibility: hidden;

---

以上两个答案对我来说都适用于类似的问题

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

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

规则：

-webkit-backface-visibility: hidden;

不适用于精灵或图像背景

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

把平铺的背景弄得一团糟

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

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

---

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

我绝对不会把它用在整个身体上。关键是要确保将来计划转换的任何特定元素都以3d方式渲染，这样浏览器就不必在渲染模式中切换。添加

-webkit-transform: translateZ(0) 

（或者已经提到的任何一个选项）添加到动画元素将实现这一点。

我必须使用：

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

---

在元素上，否则在页面加载后第一次发生转换时，我仍然会得到一个flickr。为了提高性能，我建议不要在*、body或html标记上这样做

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

---

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

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

---

（非常感谢Nathan Hoad:）

我发现应用

-webkit背面可见性：隐藏

到translation元素和

-webkit转换：translate3d（0,0,0）对所有的孩子来说，闪烁消失了
我注意到了iOS 4.2 beta 2中的问题。我现在在FF 17.0版上遇到了这个问题。。。在某些情况下，如果缩放对象的大小超过windowBehavior的大小，则始终使用Chrome…没错，背面可见性修复在图像背景上不起作用。谢谢。注意，当使用translate3d（0,0,0）anywhere时，Chrome现在会破坏任何背景位置：封面，你可能有也可能没有。这也是SVG的方法。我遇到了类似的问题。。。这并不完全相同，但是我可以看到它在某些情况下是相关的。我有一个背面有背景svg的卡片翻转，背面可见：隐藏。在webkit上，背景会一直显示到翻转完成，然后消失。我的变换是：translateY（180度）。为了修复webkit中的消失，我必须应用transform:translateZ（-1px）translateY（180deg）；，这解决了失踪问题。一个z索引问题，但涉及3d空间，而不是dom分层。棘手。我的转换影响了网站上的其他元素，最后我不得不将规则添加到网站上的所有元素中。对我来说也是如此。我有一个隐藏的菜单，当它显示时，它通过CSS动画向下推内容。将上述规则应用于隐藏菜单之后的我的主内容div，在不严重影响性能的情况下修复了我的问题。注意：当我将它应用到我的全局HTML规则时，它使CSS动画变得更糟，当心！对该属性使用通配符选择器实际上会导致其他元素的额外闪烁。我的工作解决方案是有选择地将该属性应用于正在翻译的元素。我还必须将其添加到父容器中；明智地我只是尝试在带有图像的可滚动列表上使用它，这导致了严重的帧速率下降。在：transform:translateZ（0.1px）中添加了实际值后，这很好-它没有解决问题，但它确实迫使我的代码更加严格，并且使跟踪实际问题变得容易。
-webkit-transform-style: preserve-3d;