Keyboard Dismissal Leaves Viewport Shifted in iOS 12 / XCode 10

[booleanbetrayal]

Seeing a blocking issue after updating to XCode 10 related to keyboard displacement and then dismissal.

When an input that would require webview centering is clicked, the viewport is repositioned to center that input, as iOS has traditionally done. However, when dismissing the keyboard, the viewport is not re-positioned properly back to its original position.

This can leave large gaps where the webview is no longer visible. In the attached screenshots, you can see that this leaves a large margin where the viewport is rendering, shifted upwards and off-screen by a 100+ pixels. There appears to be no way do re-position the viewport short of additional input focus changes, each resulting in similar offset issues.

To add some additional confusion, it appears this only happens on iOS 12 / XCode 10 produced installs, such that:

• This issue is present ONLY on builds produced in XCode 10 targeting iOS 12 devices.
• This issue affects ALL tested device types on iOS 12.
• This issue is present via Legacy AND Modern build systems
• iOS 10 / 11 devices targeted via XCode 10 are NOT affected.
• iOS 10 / 11 / 12 devices targeted via XCode 9 are NOT affected.

Any info on potential workarounds or patches would be greatly appreciated. I've already looked into upgrading our cordova-plugin-ionic-webview plugin (as well as various others), but it appears to not have any relevance with the issue. At this point, we're looking at downgrading XCode in order to get working builds out.

---

Click Here to See Example Screenshots

---

Captured via iOS Simulator, but also experienced on various physical devices running iOS 12

Prior to focusing an input:

Input focused: / keyboard present

Keyboard dismissed / HTML element highlighted in inspector:

---

Click Here for Environment Details

---

OS: OSX 10.13.6 (High Sierra)
XCode: 10.0 (10A255)
cordova: 8.0.0
cordova-ios: 4.5.4
cordova-plugins:

• cordova-android-support-gradle-release 1.2.0 "cordova-android-support-gradle-release"
• cordova-custom-config 5.0.2 "cordova-custom-config"
• cordova-plugin-app-event 1.2.1 "Application Events"
• cordova-plugin-apprate 1.4.0 "AppRate"
• cordova-plugin-camera 4.0.3 "Camera"
• cordova-plugin-device 2.0.1 "Device"
• cordova-plugin-dialogs 2.0.1 "Notification"
• cordova-plugin-facebook4 1.9.1 "Facebook Connect"
• cordova-plugin-file 6.0.1 "File"
• cordova-plugin-googleplus 5.2.1 "Google SignIn"
• cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
• cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
• cordova-plugin-market 1.2.0 "Market"
• cordova-plugin-media 4.0.1-dev "Media"
• cordova-plugin-nativestorage 2.3.2 "NativeStorage"
• cordova-plugin-network-information 2.0.1 "Network Information"
• cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
• cordova-plugin-splashscreen 5.0.3-dev "Splashscreen"
• cordova-plugin-whitelist 1.3.3 "Whitelist"
• cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
• cordova-support-google-services 1.1.0 "cordova-support-google-services"
• de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
• es6-promise-plugin 4.2.2 "Promise"
• phonegap-plugin-multidex 1.0.0 "Multidex"
• phonegap-plugin-push 2.2.3 "PushPlugin"

---

[dpogue]

Does this happen in a plain Cordova app without the Ionic WebView plugin? Does it happen if you use the Apache version of the WKWebView plugin (cordova-plugin-wkwebview-engine)?

[booleanbetrayal]

@dpogue - I AM seeing this when replacing cordova-plugin-ionic-webview with the cordova-plugin-wkwebview-engine WKWebView implementation, but I AM NOT seeing this without WKWebView (UIWebView)

[dpogue]

Are you using viewport-fit=cover in your meta viewport tag?

I'm trying to reproduce this in an iOS 12 simulator with Xcode 10 and plain WKWebView, and I don't see it doing anything different than iOS 11, but that might also be because my page scrolls.

[booleanbetrayal]

We are for iPhoneX / notch support:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi, viewport-fit=cover" />

I'm not seeing the issue when removing the viewport-fit=cover but this breaks notch workarounds of course.

[dpogue]

Okay, I've managed to reproduce it. The bad news is that it's not a Cordova bug, because I reproduced it in a demo Swift app with a standard WKWebView.

I'll try to wrap this demo up as a reduced test case and submit it to Apple 😞

Screenshots from my test

[booleanbetrayal]

Was afraid of that. Thanks for confirmation / isolation @dpogue . If you link the issue here, I'll be sure to try and weigh in on its importance, etc.

[dpogue]

Radar filed as rdar://44655885
Mirrored at https://openradar.appspot.com/radar?id=5018321736957952
WebKit bug report at https://webkit.org/b/192564

Please file duplicate radar reports at http://bugreporter.apple.com!

[Stefano1964]

In one af my app i had to use the ionic wkwebview (i dont use ionic framework) as this version allow to access files outside the app directory and the standard cordova wkwebview doesn't allow this kind of access.
I can see this bug ONLY with ionic wkwebview latest (Xcode 10, iOS 12 real device) and only on smartphone, on iPad it's ok (webview back to original position), on the same app switching to default cordova wkwebview the bug is not there.
Tested also with xs in simulator, same, with cordova wkwebview it's ok, not with ionic wkwebview.
@dpogue you provide a swift project (tested and the bug is present), but wkwebview implementation both in cordova and ionic is an obj-c implemenation, maybe a swift bug?

[Bravo2x]

Hello! In my case i updated cordova-plugin-ionic-webview up to ="^2.1.4"
and ionic platform to latest version. For now i have

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 12 other plugins)

System:

ios-sim : 5.0.13
NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 6.1.0
OS : macOS High Sierra
Xcode : Xcode 10.0 Build version 10A255
but it still not enough, you should add to config.xml file:




if you have issues with CORS after this modification please let me know and i will advice you how to avoid it

[Stefano1964]

@Bravo2x you have to edit CDVWKWebViewEngine.m:
ionic-team/cordova-plugin-ionic-webview#176

[booleanbetrayal]

@Stefano1964 - I have a branch with your suggested changes and am NOT seeing any change regarding keyboard displacement. Are you sure we're talking about the same issue? Are you using viewport-fit=cover"?

[Stefano1964]

Yes, i'm sure, and yes i'm using viewport-fit=cover", for me this solved the issue.