iOS Safari 上虚拟键盘上的调整大小事件延迟

Question

我正在开发一个网络应用程序，我需要在虚拟键盘展开时调整屏幕的内容。幸运的是，有人已经在这里创建了一个例子：

点击文本区域时，它会正确调整大小。然而，在 iOS 15.5 中，点击和调整大小之间存在很小的延迟。这是因为调整大小事件似乎在键盘展开后才完全触发。有趣的是，在 iOS Chrome 中，这种情况不会发生，并且可以正常工作。

是否有任何解决方法可以让 Safari 更快地触发该事件？或者有其他方法可以达到类似的效果？

Answer 1

截至目前，还没有真正的解决方案。

我发现的唯一“解决方法”是通过常规事件（如

focus

和

blur

）检测键盘何时打开和关闭。但你无法猜测最终的 VisualViewport 大小，因为有不同的键盘，所以这对我来说不是一个选择。

我对这个问题的“解决方案”是使用

after

元素扩展模式及其背景淡入视口之外（参见here）。这样打开和关闭键盘之间仍然存在跳跃，但至少外观更加一致。

Answer 2

在 iOS17 中，我仍然会在聚焦输入和相应的

visualViewport:resize

事件之间延迟约 600 毫秒，在模糊和调整大小之间延迟 700 毫秒。不幸的是

visualViewport.height

直到同一时间也没有更新。

我发现的一个解决方法是在

blur

上使用

<input>

处理程序。在处理程序中，我首先测试

document.activeElement

以查看我的其他输入是否具有焦点。如果情况并非如此，那么我会调用一个与我的

visualViewport:resize

处理程序非常相似的函数，只不过我使用

visualViewport.height

而不是使用

window.innerHeight

。

我没有在焦点上做任何事情，因为延迟对我的应用程序没有那么大的影响 - 模糊延迟导致屏幕上出现很大的空白区域，但不是为了焦点，所以等待也没有那么糟糕

visualViewport:resize

事件。