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

[amirkaromashkin]

Experience same without Cordova, using pure WKWebView.
From native code side the following workaround worked: webView.setNeedsLayout() on keyboard dismissal.
UI is re-rendered correctly but instantly, not smoothly like in Safari.

[dpogue]

For the record, I strongly suspect the issue was introduced as a side effect in WebKit/WebKit@0ff63c4

[booleanbetrayal]

Thanks for doing some digging @dpogue . I've written the author at Apple, so hopefully there is some visibility internally there, now. 🤞

[tobeee]

We found building with Xcode 9 as opposed to 10 reverted any weird keyboard issues (obviously not long term solution)

[dpogue]

This has been fixed in iOS 13.4.

[andaralex]

here - Fix(iOS): Issues related to keyboard dismissal (4.x) ionic-team/cordova-plugin-ionic-webview#533, they recommended to use cordova-plugin-wkkeyboardfix.

Has anyone used this recommended cordova-plugin-wkkeyboardfix plugin and published in Apple Store? While using this plugin, the issue has been fixed but they gave note as - plugin is a hack around a bug in iOS. It might result in your app being rejected from the App Store!.

Anyone can check and let me know your suggestion to go with this plugin cordova-plugin-wkkeyboardfix.

[jacobg]

@andaralex Yes my app was approved without any problem.

[andaralex]

@jacobg Thanks for your comment, then I will move with this plugin cordova-plugin-wkkeyboardfix.

[Kepro]

@andaralex it was fixed with iOS 13.4 not need that fix anymore, btw answer to your question was already in the thread a few times don't hesitate to use search next time

[Lindsay-Needs-Sleep]

@Kepro iOS 13.4 has indeed been fixed.
Unfortunately, the most recent version of ios 12 (12.4.6) still has the bug.

@andaralex So, depending on how many iOS 12 users you have, you may still want to use the fix.

[wswoodruff]

Still experiencing this issue. Looked all over the net and all over issues referenced here — workarounds here didn't work like scrolling to the top of the page

Related deps:
viewport-fit=cover exists in viewport meta tag
cordova 10.x.x
cordova-plugin-wkkeyboardfix v1.1.0 installed — didn't notice any change after adding
cordova-plugin-ionic-webview v5.0.0
cordova-plugin-ionic-keyboard v2.2.0

Related config.xml settings

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="native" />

I've tried setting KeyboardResizeMode to body but it's still busted

[EW-93]

@wswoodruff I have the same problem, did you find a solution?

[jagu2012]

@EW-93 @wswoodruff I'm having the same problem and none of the solutions mentioned in the thread have solved it. Did either of you have any luck?

EDIT: Turned out to be a safari css bug caused by a combination of onscreen datepicker and keyboard with a resizing viewport. Sorry for the noise.

[EW-93]

@jagu2012 For me it was something really stupid, somehow I had accidentally put another meta viewport tag in a component which overwrote the one in index.html.

[jasonfish568]

Guys, this issue should have been fixed long time ago by Apple. It did take them a year to release the update but it shouldn't be an issue anymore.

[jagu2012]

@TxLiFE Sorry my fault. This turned out to be a subtle bug that could be replicated in the web (non cordova wrapped) interface as well. A mix of Safari, flexbox and NNvh css. I'm sorry for taking your time.

[jasonfish568]

@jagu2012 Not blaming you, but people need to read through this issue, work around has been provided. And do update your dependencies.

[bhanuprakashwebops]

this worked for me

jQuery('input, textarea').focus(function(){
$('#id-of-element').css('position', 'fixed');
});
jQuery('input, textarea').blur(function(){
$('#id-of-element').css('position', 'absolute');
});