fix(ios): fix keyboard displacement bug in iOS 12 WKWebView

[booleanbetrayal]

Fixes #176

credit: @KhanhPhamDinh

[booleanbetrayal]

I'm seeing a "bounce" effect when completing a particular input and then programmatically focusing the next. This might need to be de-bounced or handled with some better state handling for that use-case.

[booleanbetrayal]

Worked in the timer debounce support for the programmatic input-focus issue (which caused a visual "bouncing" during an unnecessary contentOffset adjustment).

@KhanhPhamDinh - you might want to take a look to see how this differs from your original implementation.

[KhanhPhamDinh]

Worked in the timer debounce support for the programmatic input-focus issue (which caused a visual "bouncing" during an unnecessary contentOffset adjustment).

@KhanhPhamDinh - you might want to take a look to see how this differs from your original implementation.

Your welcome, @booleanbetrayal.

[booleanbetrayal]

Any change on getting this merged @dwieeb / @nphyatt?

There is a good explanation of the issue in apache/cordova-ios#417 prior to realizing this was an Apple WKWebView issue we'd need to work around.

Thanks!

[ravron]

Note that there's detailed information on this WKWebView bug at this Open Radar ticket.

[simtechpom]

@booleanbetrayal using this fork did solve the viewport problem in iOS.

But convertFileSrc() has undefined error in android application. If I switch back to master branch of the WKWEBVIEW, convertFileSrc() works fine in android.

[booleanbetrayal]

@simtechpom - perhaps a discrepancy between when I forked this repo and what master is at now. Out of scope from this changeset. All the more reason to get this merged!

[Vivek-abstract]

Please merge this. I'm facing issues with the keyboard. Whenever I type into a textarea the back button stops working

[bshafiee]

@manucorporat Could you please take a look at this and possibly merge? it basically renders our app useless and is a huge issue. Thanks in advance.

[mlynch]

So who has tested this? Just because it's a PR doesn't mean that you can't start using it. Would love some help making sure this doesn't break stuff.

[bshafiee]

I've not tested this patch yet Max, but I just dowgraded my keyboard plugin to the deprecated version and it works fine there:

cordova plugin rm cordova-plugin-ionic-keyboard
ionic cordova plugin add ionic-plugin-keyboard && npm install --save @ionic-native/native-keyboard

Not really sure why it doens't happen there 🤷‍♂️
Ionic info:

Ionic:

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

Cordova:

   cordova (Cordova CLI) : 8.1.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.2.3, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/behrooz/Library/Android/sdk/)
   NodeJS            : v9.11.1 (/usr/local/Cellar/node/9.11.1/bin/node)
   npm               : 5.10.0
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

and cordova plugin

...
cordova-plugin-ionic-webview 2.2.3 "cordova-plugin-ionic-webview"
ionic-plugin-keyboard 2.2.1 "Keyboard"
...

[mlynch]

Okay resolved conflicts and merged. Testing something quick and then will be in 2.2.4 tonight

[mlynch]

2.2.4 released with this PR, thanks for the contribution and for others adding their feedback!

[bshafiee]

I just tried 2.2.5 and it works fine, no scrolling issue and no convertFileSrc issue on ios either (will check for Android too). Thanks @mlynch for merging and thanks @booleanbetrayal for the PR! 👏 😍

[booleanbetrayal]

Great! Hopefully this gets fixed upstream on Apple's end at some point and we can limit the scope of those keyboard listeners.

[risikoruk]

Still happens to me with webview 2.2.5 and keyboard 2.1.3 installed. Specifically when focusing on an input in a login screen in Framework7. Elements get pushed top and at keyboard closing the height isn't adjusted

[andrejwright]

I am finding that it isn't working for me either. I tried with webview 2.2.5 & 2.2.4 and using keyboard 2.2.1. Same experience as @risikoruk

[kieranbehn]

I am also still experiencing this issue using cordova-plugin-ionic-webview 2.3.1 and cordova-plugin-ionic-keyboard 2.1.3

[daniellizik]

I'm on cordova-plugin-ionic-webview 2.3.2 and can still reproduce this issue, but I'm not using any keyboard plugin

[jayordway]

I am on cordova-plugin-ionic-webview 4.0.0 and this is still an issue.

[ananthaarni]

I have the same issue and it's show stopper

[ericpointofrental]

Downgrading to ionic-plugin-keyboard@2.2.1 and cordova-plugin-ionic-webview@2.2.5 worked for my Ionic 4 app. Not even close to ideal, but more ideal than having the screen jump all over the place whenever the user uses my messaging input.

[sajallimbu]

Issue still exists in ios12 with Ionic 4 wkwebview.
Causes the viewport to bounce when shifting focus from one field to another.