CSS3转换/转换/转换3d导致转换的第一个或最后一个“帧”严重闪烁(在iPad上)
全,
我正在开发一个专门用于iPad的web应用程序，并且我正在使用CSS3过渡来设置div的动画(将其从左向右移动)。
我的类看起来像这样：
.mover {
-webkit-transition:all 0.4s ease-in-out;
}当用户单击一个按钮时，我这样做：
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);除了用户触发转换的第一次时间之外，它的效果很好；第一次，有一个非常明显的闪烁。
我意识到我不需要使用translate3d，因为我只需要左右移动div，但据我所知，这会迫使iPad使用GPU加速。(这样做正确吗？)
首先要感谢大家！
更新
我对“闪烁”一词有点模棱两可。简而言之，我一直在试验各种各样的CSS3转换(特别是在iPad上)，并且一直都注意到在转换的start或end上有一个明显的闪烁。
换句话说，转换本身是非常平滑的。然而，根据精确的设置，在过渡开始或结束之前会有一个明显的闪烁。
这是另一个例子:我有三张照片(PNG)堆叠在一起。
最下面的PNG有opacity=1.0，最上面的2有opacity=0.0。使用-webkit-keyframe，我可以在照片淡入淡出时获得平滑的过渡效果。当动画结束时，底部的照片结束于opacity=1.0，顶部的两个结束于opacity=0.0。(这应该是它们的最终状态)。
然而，就在动画结束时，底部的照片闪烁。这就好像浏览器被强制重新绘制/重新绘制屏幕一样，这只需要几秒钟的时间。
这已经够糟糕的了，破坏了效果，并使过渡变得不可用。(在我的iMac上，它几乎是不可察觉的，但也不完全是。在iPad上，它是不容错过的)。
回答 6
Stack Overflow用户
发布于 2012-02-29 00:53:18
全,
我并不是很肯定这就是答案(特别是因为闪烁本身似乎有点不可预测)，但据传闻，这似乎可以摆脱它……()
不管怎么说，我是这么做的：
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);通常，在第一次执行这个时，我会在动画开始之前看到一个闪烁。后续调用将平滑地生成动画。
我推断的是，如果在调用动画之前没有设置3d坐标，您将看到闪烁。第一个调用设置了这些坐标，因此后续调用将平滑地生成动画。
所以-我尝试先设置div的3d坐标(本质上是在我第一次构建屏幕时-即初始化)，然后再触发任何动画。
因此，此后-当调用3d动画时，div/元素的起始3d坐标已经建立。
这似乎消除了闪烁。
正如我所说的-我不确定这是否是一个健壮可靠的修复，但它肯定已经消除了我当前项目中的问题。
祝好运。
Stack Overflow用户
发布于 2011-05-05 17:41:44
我也在处理同样的问题，我在这里找到了解决方案：iPhone WebKit CSS animations cause flicker
它就像添加
-webkit-backface-visibility: hidden;而且有可能
-webkit-perspective: 1000;添加到每个动画对象。这对我很有效，希望这对你也有帮助
Stack Overflow用户
发布于 2011-06-24 11:22:26
我们通过修复视窗解决了许多闪烁和字体问题。
以前，我们有内容离开页面(滑动div)，当视窗不固定时，设备似乎进入连接，必须处理屏幕外的数据，并结合显示内容的缩放能力。
头上的这个标签解决了我们的问题。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">https://stackoverflow.com/questions/5814101
复制相似问题