Cordova IOS 12 Wkwebview 正文滚动问题

Question

我有一个 Cordova 应用程序（PGB cli-6.5.0、Cordova iOS 4.3.1、wkwebview）在 iOS 12.1 上表现出奇怪的行为。该代码在 iOS 12 之前已经运行多年。该应用程序允许在应用程序中实现各种数字输入样式，但还包括标准键盘。在 iOS 12 中，输入弹出 div 或标准键盘出现并正常显示，但触摸未在正确位置注册。它们垂直偏移（记住一切在视觉上都是正常的）。即使使用标准键盘也是如此。更改设备方向可以解决该实例的问题，但下次选择输入时问题仍然存在。在 iOS 12 Safari 或 Chrome 上使用应用程序的 Web 版本时不会发生这种情况。在使用 Cordova 原生版本的 Android 上不会发生这种情况。

使用调试器，我发现在标准键盘被键盘覆盖的输入关闭后，body 元素有一个非零的 scrollTop。这不应该发生。我找到的解决方法是在 onblur 事件处理程序中设置 body.scrollTop = 0。

我发现即使是不显示标准键盘的自定义输入也是这样做的。 Setting body.scrollTop = 0 caused a noticeable "bounce" on the body when an input that would have been covered by the standard keyboard (which should not be displayed) was selected.

我已经尝试将 KeyboardDisplayRequiresUserAction 设置为 false 并使用更新的 PGB 版本 (cli-7.1.0) 而没有任何变化。在事件处理程序中设置调试器断点似乎表明即使调用 preventDefault() 键盘也会显示，它只是在呈现之前再次消失。

通过将输入设置为只读，我让键盘暂时停止出现。这适用于 iPad，但在 iPhone 上会出现一个选项卡导航器而不是键盘（基本上只是标准键盘标题）。我无法让它在 iPhone 上停止。每当我不使用标准键盘时，我终于改为使用跨度而不是输入。无论如何，这可能是最好的。

我的初步结论是iOS 12 wkwebview存在三个bug：

• preventDefault() 并不能完全阻止键盘显示和滚动正文，这是必需的。它似乎只是在渲染之前显示后将其删除。
• 类似地在输入元素上设置 readOnly 也不会完全阻止键盘显示。
• 每当 wkwebview 在选择将被键盘覆盖的输入后显示键盘时，它会滚动正文以保持输入可见，但在关闭时无法恢复 scrollTop，即使显示看起来好像已恢复。这会将所有触摸事件替换滚动量。如果您触摸移位的按钮位置，您甚至可以在手指下看到点击动画。还记得更改设备方向会恢复正确的滚动。

我看不出 Cordova 或我的 JS 是如何导致这种情况发生的。

有没有其他人注意到这一点？

Answer 1

已解决：

首先在你的项目中搜索这个：

<preference name="DisallowOverscroll" value="false" />

并设置为

<preference name="DisallowOverscroll" value="true" />

然后将其添加到您的 css 正文中：

position: fixed;
overflow-y: hidden;

注意：

• 我正在运行 cordova v.9.0.1 和 iOs 13.6.1
• 我注意到我的cordova项目有2个config.xml（我不知道为什么）无论如何你必须修改的放在platforms/ios/<your_app>/config.xml