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

Posted 2023-02-25

【中文标题】当触发 iOS Safari 中的虚拟键盘时，它会使我的 CSS 过渡闪烁。如何解决这个问题？

【英文标题】：When the virtual keyboard in iOS Safari is triggered, it makes my CSS transitions flicker. How can this be fixed?

【发布时间】：2014-08-30 23:54:55

【问题描述】：

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

即使我在上面加上transition-delay，它似乎也会闪烁/颤抖。

奇怪的是动画在模糊（键盘后退）时很流畅。

我可以在这里的 JSFiddle 中复制问题：（在 ios 中打开）

JSFiddle 包含在下面：

http://jsfiddle.net/5w0fj2rx/

您可以看到，在输入元素上聚焦/点击会跳过动画大部分时间。有时效果很好。

有人知道解决方法吗？好像以前应该遇到过，但是我找不到任何相关信息。

【问题讨论】：

尝试添加-webkit-backface-visibility: hidden; (demo)...我没有 Safari 来测试它。

在这里也试过jsfiddle.net/5w0fj2rx/4 - 没有骰子。

我在 iPhone 5s 上使用 iOS7，它对我来说很好。我在 safari 和 chrome 浏览器上试过你的小提琴链接。

@CodeMonk 我也在 5S 上，它至少会跳过一些动画帧。你能仔细检查一下吗？

您可以尝试按照here 的描述添加 CSS 属性吗？更具体地说，-webkit-transform: translate3d(0, 0, 0) 看看将过渡元素推到自己的“层”是否有帮助，或者-webkit-perspective: 1000 与前面提到的-webkit-backface-visibility: hidden 结合使用。

【参考方案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 像素的元素而构建的。