Cordova IOS 12 Wkwebview机身滚动问题



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

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

我发现,即使是没有显示标准键盘的自定义输入也在这样做。当选择了标准键盘(不应显示(所覆盖的输入时,将body.scrollTop设置为0会在主体上引起明显的"反弹"。

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

通过将输入设置为只读,我使键盘暂时停止显示。这在iPad上有效,但在iPhone上会出现一个选项卡导航器,而不是键盘(基本上只是标准的键盘标题(。我无法在iPhone上停止此操作。当我不使用标准键盘时,我终于改为使用跨度而不是输入。无论如何,这可能是最好的。

我的初步结论是,有三个iOS 12 wkwebview错误:

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

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

其他人注意到了吗?

已解决:

在您的项目搜索中的第一个:

<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

最新更新