Hi everyone,

I wanted to provide an update on this issue.

We believe this might be a bug in Chrome 76. When running in a WebView, the html and ion-app elements are resized down when the keyboard is opened, and then resized back to their original sizes when the keyboard is closed. On Chrome <= 75 this works as expected; however, on Chrome 76 only the html element is resized back to its original size.

In order to ensure ion-app is recalculated properly we need to force a layout/reflow on the page. Here is a temporary workaround that you can place in your application’s code:

window.addEventListener('keyboardWillHide', () => {
  const app = document.querySelector('ion-app');
  window.requestAnimationFrame(() => {
    app.style.height = '100%';
    window.requestAnimationFrame(() => {
      app.style.height = '';
    });
  });
});

We are looking into reporting this bug to the Chrome team for them to take a look at. I will post here with any future updates.

Thanks!

Just an FYI this also happens when you change screen orientation. The fix only works with vertical height changes and not horizontal.

@Ross-Rawlins Thanks for the tip! Saved my day.

Our current solution ended up as follows:

document.addEventListener('deviceready', () => {
  if (window.cordova.platformId !== 'android') {
    return;
  }
  const hack = () => {
    const ionApp = document.querySelector('ion-app');
    if (ionApp) {
      // https://github.com/ionic-team/ionic/issues/19065#issuecomment-521370741
      window.requestAnimationFrame(() => {
        ionApp.style.height = '100%';
        window.requestAnimationFrame(() => {
          ionApp.style.height = '';
        });
      });
    }
  };
  if ('ResizeObserver' in window) {
    const ResizeObserver = (window as any).ResizeObserver;
    new ResizeObserver(hack).observe(document.documentElement);
  } else {
    window.addEventListener('keyboardWillShow', hack);
    window.addEventListener('keyboardWillHide', hack);
  }
});

(We put above in main.ts.)

Maybe related to #19015 ?

The cause appears similar but the implication are different. #19015 issue is about scrolling, in my case, the issue makes the application entirely non usable for my users. The keyboard leaves a blank white portion unused which is causing a huge influx of user feedback pertaining to the issue.

In smaller screen devices, the login form has become completely non accessible to the user.

It has been 4 days since the issue & user application experience has been down the drain because of this issue.

The only good thing in all this fiasco is that iPhone App users are not affected by this.

I can reproduce this. We are actively investigating a fix and will post here when we have an update.

Thanks!

We have the same issue. The enclosing ion-page element don’t resize properly. Every time the ion-input lose focus by clicking on an external element (for example dismiss the parent modal or open the popover of another ion-select …).

thx @ippeiukai for the workaround, it works like a charm!

for those interested, I’ve made one or two changes to the script. Notably loading it on DOMContentLoaded instead of deviceready (for those who don’t have a Cordova platform or so), added the resize event (when the browser window is resized) as fallback and also an unsubscribe of the event when the client leave the site (you never know 😉)

Feedbacks and improvements welcomed!

// https://github.com/ionic-team/ionic/issues/19065#issuecomment-521370741

const hack = () => {
    const ionApp = document.querySelector('ion-app');

    if (ionApp) {
        window.requestAnimationFrame(() => {
            ionApp.style.height = '100%';
            window.requestAnimationFrame(() => {
                ionApp.style.height = '';
            });
        });
    }
};

let resizerObserver;

document.addEventListener('DOMContentLoaded', () => {
    if (!window) {
        return;
    }

    if ('ResizeObserver' in window) {
        const ResizeObserver = (window as any).ResizeObserver;
        resizerObserver = new ResizeObserver(hack);
        resizerObserver.observe(document.documentElement);
    } else {
        window.addEventListener('keyboardWillShow', hack);
        window.addEventListener('keyboardWillHide', hack);
        window.addEventListener('resize', hack);
    }
});

window.addEventListener('unload', () => {
    if (!window) {
        return;
    }

    if ('ResizeObserver' in window) {
        if (resizerObserver) {
            resizerObserver.unobserve(document.documentElement);
            resizerObserver.disconnect();
        }
    } else {
        window.removeEventListener('keyboardWillShow', hack);
        window.removeEventListener('keyboardWillHide', hack);
        window.removeEventListener('resize', hack);
    }
});

Thanks for the issue. Are you able to provide a repo with the code required to reproduce this issue?

Same issue on Android 9 Samsung A8. Any solution yet?

The fix works fine for most pages here. Not for the pages on which I have ion-slides.

Hey,

There is a sample repo at https://github.com/ionic-team/ionic/issues/19088 : https://github.com/cmeuser/LoadingController

• Tap on input (next to default label)
• Tap click button

Reproducible on Cordova and Capacitor projects

@siddharth-pand8y I faced the same problem wherever using ion-input element. Hopefully this will be fixed soon, cause it makes ion-input unusable all over the app. We created an ugly workaround by changing a style of the current page to force a rerender after the keyboardDidClose event was fired.