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

2023年4月22日 263次阅读

在Mobile Safari上,似乎webkit在虚拟键盘触发(即向上滑动)时转换,导致闪烁,有时它甚至完全跳过动画.

即使我对它进行过渡延迟,它似乎甚至会闪烁/颤抖.

奇怪的是动画在模糊时是平滑的(键盘撤退).

我可以在这里复制JSFiddle中的问题:(在iOS中打开它)

JSFiddle包含在下面：

http://jsfiddle.net/5w0fj2rx/

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

有人知道这方面的解决方法吗？这似乎是以前应该遇到过的东西,但我找不到任何关于它的信息.

最佳答案 我能够看到过渡
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像素的元素而构建的.

点赞