问题
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.
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.
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.
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.
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.
My preliminary conclusion is that there are three iOS 12 wkwebview bugs:
- preventDefault() does not completely prevent the keyboard from displaying and scrolling the body, of required. It seems to just remove it after it's been displayed before rendering.
- Similarly setting readOnly on an input element does not completely prevent the keyboard from displaying either.
- Whenever wkwebview displays a keyboard after selecting an input that would be covered by the keyboard it scrolls the body to keep the input visible, but fails to restore scrollTop when dismissed, even though the display appears as if it has been restored. This displaces all the touch events by the scroll amount. You can even see the click animation under your finger if you touch at the displaced button location. Also recall that changing the device orientation restores the correct scroll.
I can't see how either Cordova or my JS could cause this to happen.
Has anyone else noticed this?
回答1:
SOLVED:
first in your project search for this:
<preference name="DisallowOverscroll" value="false" />
and set to
<preference name="DisallowOverscroll" value="true" />
then add this to your css body:
position: fixed;
overflow-y: hidden;
NOTE:
- I'm running cordova v.9.0.1 and iOs 13.6.1
- I notice my cordova project has 2 config.xml (I don't know why) anyway the one you have to modify is placed in
platforms/ios/<your_app>/config.xml
来源：https://stackoverflow.com/questions/53401141/cordova-ios-12-wkwebview-body-scroll-issue