html - 当触发 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 像素而设计的。