Capacitor: keyboard resize is slow in iOS.

[rdlabo]

Description of the problem:
Keyboard resize is slow. Resize is executed after show keyboard in beta.25.

This is sample movie.
https://www.dropbox.com/s/xlt0703zd413o4v/RPReplay_Final1558416822.MP4?dl=0

Thanks.

Affected platform

• [ ] Android
• [x] iOS
• [ ] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [x] macOS
• [ ] linux

Other information:

Capacitor version:
Capacitor CLI : 1.0.0-beta.25
@capacitor/core : 1.0.0-beta.25

node version:
NodeJS : v10.15.3 (/usr/local/bin/node)

npm version:
npm : 6.9.0

CocoaPods version:
1.6.1

Steps to reproduce:

Link to sample project:

[solojuve1897]

I was about to create an issue regarding this. This makes using the event listener keyboardWillShow useless if one wants to scroll down the keyboardHeight. Works perfectly on Android. As a backup I'm using keyboardDidShow for iOS but the experience is far from desired in comparison because the scrolling occurs after the keyboard has shown instead of simultaneously.

[sebastiencloss]

It is not only slow, but doesn't work the first time. At a second klick on the input, it works. Tested on iphone 5s. and then, sometimes not at all, or sometimes open and immediately close the keyboard.
iphone 5s and ionic-capacitor app and ios 11.4.1

[sinan92]

Any update on this issue?

[kamekaioken]

I am having the same issue.
Changing the resize mode does also not help.
Any workaround until a fix is ready?

[aparajita]

To be clear, testing shows that resizing isn't slow, but rather keyboardWillShow is called after the keyboard actually begins to show.

[rdlabo]

This is one solution. I think that the reproducibility will be improved if you do your best in the animation.
Like https://twitter.com/rdlabo/status/1332656964166320129

1. Auto resize is be disabled:

```capacitor.config.json
{
"plugins": {
"Keyboard": {
"resize": "none"
}
}

2. Listen EventListener and change margin-bottom.

```app.component.ts
if (this.platform.is('ios')) {
    window.addEventListener('keyboardWillShow', (e) => {
      const app: HTMLElement = document.querySelector('ion-app');
      app.style.marginBottom = (e as any).keyboardHeight + 'px';
  });
  window.addEventListener('keyboardWillHide', (e) => {
    const app: HTMLElement = document.querySelector('ion-app');
    app.style.marginBottom = '0px';
  });
}

1. set transition.

global.scss ion-app { margin-bottom: 0; transition: margin-bottom 420ms; }

Thanks.

[aparajita]

@rdlabo Interesting solution! Of course that is only useful when the input is pinned to the bottom of the screen. There is a more generalized case for making sure inputs anywhere on the screen are moved into view when focused. I'm working on a solution for that.