UI breaks when OSKB displays on iOS 12 - Ionic 4 Beta 7, Capacitor 1 beta-8

[nikmartin]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

ionic (Ionic CLI)          : 4.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.11.4 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : macOS High Sierra

Describe the Bug
When the on screen keyboard is displayed and hidden (from a footer input), it causes the UI to be scrolled up, the user interface is 'shifted' up by the width of the keyboard. When the keyboard then disappears, all the UI input is still shifted up by the width of the keyboard. This means all clicks in the UI are too high (ie inputs, etc). Also, when an input is in the content area, the keyboard will hide the input instead of scrolling it as it should.

Steps to Reproduce
Steps to reproduce the behavior:

1. Clone: https://github.com/grabitlogistics/ios12kbd
2. run npm i && ng build && npx cap add ios && npx cap copy ios && npx cap open ios
3. Run the project on an ios 12 device
4. Click in an upper input to display the keyboard, then click outside to hide the keyboard and lose focus.
5. Click on an input in the footer, making the keyboard appear and shift the inputs up. Click outside the input to hide the keyboard.
6. All touch events have now been shifted up by the height of the keyboard, so to click in the input in the content OR the footer, you must click a few inches above the respective input (about the height of the keyboard)

Related Code
sample test case: https://github.com/grabitlogistics/ios12kbd

Additional Context
This ONLY happens on iOS 12, on a hardware device OR emulator. To test in an emulator, you must use the emulated keyboard in order to cause the UI to shift up.

[marholdm]

Got the same issue :(
I tried a lot of preferences in config.xml but nothing works

It works fine for me on your repo https://github.com/grabitlogistics/ios12kbd

[nicdichiara]

@Monierv We were advised that this is the same as:
ionic-team/capacitor#814

Which is suspected to stem from an iOS 12 SDK issue:
http://www.openradar.me/44655885

We are going to test today, but there's talk that building with Xcode 9 fixes it until an actual fix is released. Hope the links help.

[booleanbetrayal]

Confirming that building with XCode9 fixes it @nicdichiara

[luke-rogers]

Any progress on this one?
I can also confirm that this is not an issue with Xcode 9 even if using iOS 12.

[hghammoud]

I did some testing on multiple ios/emulators
XCode 10.0

iPhone 8 Plus iOS 11 -> no view shits everything is ok
iPhone 8 Plus iOS 12 -> no view shits everything is ok
IPhone X iOS 11.3 -> view shits but clicks are in place ()
IPhone X ans XS iOS 12 -> view shits and clicks are not accurate (the click action triggers lower the the touch point - same amount of view shit)

it seems related seems related to the extra track pad.

[paulstelzer]

If it's not fixed since then, I think this problem is more related to https://github.com/ionic-team/cordova-plugin-ionic-keyboard - So I close this issue here

[nikmartin]

The issue also exists in capacitor, so I don't think it's specific to that issue.

[paulstelzer]

Capacitor is also using a plugin to display the keyboard. @ionic/core has no functionality to show the keyboard, so it's not related to @ionic/core itself, that I want to say :)

But maybe I am totally wrong, so @jcesarmobile can you say something about it? If I am wrong, i will open this issue again here.

[jcesarmobile]

As it was commented by @nicdichiara, this is a bug in the iOS 12 SDK (Xcode 10).
The issue is already reported on
ionic-team/capacitor#814

There are a few workarounds mentioned

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.