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
• iOS
• electron
• web

OS of the development machine

• Windows
• 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:

{
  "plugins": {
    "Keyboard": {
      "resize": "none"
    }
}

2. Listen EventListener and change margin-bottom.

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';
  });
}

3. set transition.

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.

[jcesarmobile]

Going to close since the video is no longer online, there is no test app to reproduce and the issue refers to capacitor 1 beta.

Current code sends the keyboardWillShow as soon as the native UIKeyboardWillShowNotification is fired, not sure if that wasn't true in the past.

If the issue is still happening, please, report it on https://github.com/ionic-team/capacitor-plugins/issues and provide a sample app where it can be reproduced.

[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 Capacitor, please create a new issue and ensure the template is fully filled out.