Question

所有

我正在开发专门针对iPad的网络应用，我正在使用CSS3过渡来为div设置动画（从左到右移动）。

我的班级看起来像这样：

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

当用户点击按钮时，我这样做：

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

这非常有效 EXCEPT 用户触发转换的第一时间;第一次，有一个非常明显的闪烁。

我意识到我不需要使用translate3d，因为我只是左右移动div，但据我所知，这迫使iPad使用GPU加速。（这是正确的吗？）

非常感谢提前！

[UPDATE]

我对“闪烁”有些模棱两可。简而言之 - 我一直在尝试各种各样的CSS3过渡（特别是在iPad上），并且始终如一 - 我注意到开始或结束时的明显闪烁转型。

换句话说，过渡本身非常顺利。但是，根据精确设置，在转换开始或结束之前会有明显的闪烁。

这是另一个例子：我有三张照片（PNG）堆叠在一起。

底部PNG的不透明度= 1.0，顶部2的不透明度= 0.0。使用-webkit-keyframes，当照片淡入和淡出时，我能够获得丝般平滑的过渡。当动画结束时，底部照片以opacity = 1.0结束，前两个以opacity = 0.0结束。（这应该是他们的最终状态。）

但是，就像动画结束一样，底部照片会闪烁。就像浏览器强行重绘/重绘屏幕一样，这需要几分之一秒。

糟糕的是破坏效果，然后渲染转换不可用。（在我的iMac上，它几乎，但不是很明显。在iPad上，这是不容错过的。）

Answer 1

我正在处理同样的问题，我在SO上找到了解决方案：iPhone WebKit CSS animations cause flicker

就像添加

一样简单

-webkit-backface-visibility: hidden;

可能

-webkit-perspective: 1000;

到每个动画对象。它对我有用，希望这对你也有帮助

Answer 2

我们通过修复视口解决了许多闪烁和字体问题。

之前我们有内容离开页面（滑动div），当视口没有修复时，设备似乎陷入了混乱，不得不在屏幕上处理数据并结合缩放功能显示的内容。

头上的这个标签解决了我们的问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

Answer 3

所有

我不是肯定这就是答案（特别是因为闪烁本身似乎有点不可预测），但传闻，这似乎摆脱了它......

无论如何，这就是我在做的事情：

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

通常， FIRST 时间执行，我会在动画开始前看到闪烁。随后的调用将平滑动画。

我推断的是，如果在调用动画之前未设置3d坐标，则会看到闪烁。第一个调用设置这些坐标，因此后续调用将平滑动画。

所以 - 在尝试任何动画之前，我首先尝试设置div的3d坐标（基本上，当我第一次构建屏幕时 - 即初始化）。

因此，此后 - 当调用3d动画时，div /元素的起始3d坐标已经建立。

这似乎消除了闪烁。

正如我所说 - 我不确定这是否是一个强大，可靠的解决方案，但它肯定已经消除了我当前项目中的问题。

祝你好运。

Answer 4

尝试

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
}

但是，据我了解，这迫使iPad使用GPU加速

translate（）和translate3d（）都会创建堆叠上下文，并且可以使用图层 - GPU的纹理缓冲区。所以我认为它们在加速方面确实没有任何区别。

Answer 5

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

我注意到当我在div上有悬停状态时页面会闪烁，即使我没有附加任何css或js。我看不到你的HTML，但这可能会有所帮助

Answer 6

我遇到了这个问题并尝试了上述所有建议。我刚刚发现面部的z-index可能导致问题。

我有3个窗格1中间（平面）两侧的角度像这样\ _ / - 中间的一个闪烁而z-index高于或等于两侧。将它移到底部会完全固定闪烁。

希望有所帮助。

CSS3 transition / transform / translate3d会在转换的第一个或最后一个“帧”上导致严重的闪烁（在iPad上）

6 个答案: