问CSS3转换/转换/转换3d导致转换的第一个或最后一个“帧”严重闪烁(在iPad上)

EN

全,

我正在开发一个专门用于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上，它是不容错过的)。