当iOS Safari中的虚拟键盘被触发时，它会使我的CSS过渡闪烁。怎么解决这个问题？

Question

在Mobile Safari上，似乎webkit在虚拟键盘触发（即向上滑动）时转换，导致闪烁，有时甚至完全跳过动画。

即使我把transition-delay放在上面，它似乎甚至会闪烁/颤抖。

奇怪的是动画在模糊时很平滑（键盘撤退）。

我能在这里复制JSFiddle中的问题:(在iOS中打开）

JSFiddle包含在下面：

http://jsfiddle.net/5w0fj2rx/

您可以看到聚焦/点击输入元素将在大多数时间跳过动画 。有时它工作正常。

任何人都知道解决方法吗？这似乎是以前应该遇到的事情，但我无法找到相关信息。

Answer 1

我能够看到过渡here。

我添加到你的box.move元素。

#box.move {
  -webkit-transform: translate3d(300px, 0, 0);
-webkit-backface-visibility: hidden;
} 

另外......你已经在使用jQuery了，所以我会使用它代替CSS来执行动画和转换。

修改

我做了一些额外的麻烦，你的转换缓和，我能够消除之前转换的任何跳跃/闪烁。这是fiddle。

-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;

我唯一可以假设的是这背后的原因，是浏览器能够处理转换的帧速率。因此，通过首先减少元素移动的量，我们可以消除闪烁效应。这可能是视频的浏览器默认设置是打开视频播放器的原因。我不认为移动safari浏览器是为了在500毫秒内平滑移动300像素而构建的。