科尔多瓦IOS 12 Wkwebview正文滚动问题 [英] Cordova IOS 12 Wkwebview body scroll issue

问题描述

我有一个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上不会发生这种情况.

I have a Cordova app (PGB cli-6.5.0, Cordova iOS 4.3.1, wkwebview) that is exhibiting strange behavior on iOS 12.1. The code had been working for years before iOS 12. The app allows a variety of numeric input styles implemented in the app but also includes the standard keyboard. In iOS 12 the input popup div or standard keyboard comes up and appears as normal, but a touch does not register in the correct place. They are offset vertically (remember everything is normal visually). This is true even with the standard keyboard. Changing the device orientation fixes the problem for that instance, but the issue remains the next time an input is selected. This does not happen using the web version of the app on iOS 12 Safari or on Chrome. It does not happen on Android using the Cordova native version.

使用调试器，我发现在标准键盘被键盘覆盖的输入关闭后，body元素的scrollTop不为零.这永远都不会发生.我发现的解决方法是在onblur事件处理程序中将body.scrollTop = 0设置.

Using the debugger, I discovered that the body element had a non-zero scrollTop after the standard keyboard is dismissed for an input that would have been covered by the keyboard. This should never happen. The fix I found was to set body.scrollTop = 0 in the onblur event handler.

我发现，即使不显示标准键盘的自定义输入也在执行此操作.设置body.scrollTop = 0时，如果选择了本应由标准键盘覆盖(不应该显示)的输入，则会在主体上引起明显的反弹".

I found that even the custom inputs that did not display the standard keyboard were doing this. 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()键盘也会显示，但在呈现之前它会再次消失.

I've played with setting KeyboardDisplayRequiresUserAction to false and using more recent PGB releases (cli-7.1.0) with no change. Setting a debugger breakpoint in the event handler seems to indicate that the keyboard displays even if preventDefault() is called, it just disappears again before being rendered.

通过将输入设置为readOnly，我使​​键盘暂时停止显示.在iPad上可以使用，但在iPhone上会出现标签导航器，而不是键盘(实际上只是标准键盘头).我无法阻止它在iPhone上停止播放.最终，无论何时不使用标准键盘，我都改为使用跨度而不是输入.无论如何这可能是最好的.

I got the keyboard to stop temporarily appearing by setting the input to readOnly. That works on iPad, but on iPhone a tab navigator appears instead of the keyboard (essentially just the standard keyboard header). I could not get this to stop on the iPhone. I finally changed to using a span instead of an input whenever I'm not using the standard keyboard. This is probably for the best anyway.

我的初步结论是，存在三个iOS 12 wkwebview错误:

My preliminary conclusion is that there are three iOS 12 wkwebview bugs:

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

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

I can't see how either Cordova or my JS could cause this to happen.

还有其他人注意到吗?

推荐答案

已解决:

首先在项目中搜索以下内容:

first in your project search for this:

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

并设置为

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

然后将其添加到您的CSS正文中:

then add this to your css body:

position: fixed;
overflow-y: hidden;

注意:

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

这篇关于科尔多瓦IOS 12 Wkwebview正文滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！