Ionic-framework: bug: Viewport Size - Keyboard - Chrome/Webview v76.x - Android

[siddharth-pand8y]

Bug Report

Ionic version:
[x] 4.x

Current behavior:

Viewport doesn't get resized on closing & opening of keyboard. This causes issues focusing on input fields & button as it hides behind the keyboard.

The issue came ever since the new update of Chrome/Webview 76.x

Screenshot below

Expected behavior:

The viewport resizes as per visible screen when keyboard opens up.

As you can see in the screenshot , the login form is vertically centered and it has been working flawlessly before this recent chrome update

Steps to reproduce/ Related Code:

Write a div and apply following css properties to the parent element of that div (i.e. body)

display: flex;
flex-direction: column;
justify-content: center;

Other information:

Another issue that came along with this was, in some older phone i.e android v8 & below - upon closing the keyboard, the viewport size did not reduce and the area size of keyboard would have a blank white screen.

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.4 (C:\Users\PRARACHN\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 18 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v12.8.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.2
   OS     : Windows 10

[johannesf95]

Maybe related to #19015 ?

[siddharth-pand8y]

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.

[johannesf95]

@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.

[Pixophilia]

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 ...).

[smxdevst]

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

[kerosin]

Same here, Viewport doesn't resize after closing keyboard. So a blank safe-area with the height of the keyboard is kept.

Any workaround so far?
Needs to be fixed urgent. Currently Android native not usable for production.

[liamdebeasi]

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

[kerosin]

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

[dansiemens]

Please fix ASAP, this is a major issue for our users.

[liamdebeasi]

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

Thanks!

[k-samuelsan]

Replicable and critical. My clients need this fixed right away.

[liamdebeasi]

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!

[dansiemens]

Can confirm the temp workaround provided by @liamdebeasi is working, thank you for the quick response.

[WouterWidgets]

I can confirm that this issue appeared after updating the Google Chrome app.
I was unable to reproduce it before updating on a test device here. It appeared after I updated Chrome to 76.0.3809.111 on that same device.

[malwatte]

I'm having this issue too. Same app worked before, not working in Chrome 76. In my case, it works fine in portrait mode, but doesn't work in landscape mode. I think it works in portrait mode because of android:windowSoftInputMode="adjustResize" which resizes the whole window. But resizing doesn't work in landscape because I hide the status bar and app is full screen.

[ippeiukai]

probably related:

• https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/411
• https://github.com/ionic-team/ionic-v3/issues/1051

[WouterWidgets]

probably related:

• ionic-team/cordova-plugin-ionic-webview#411
• ionic-team/ionic-v3#1051

I doubt that 1051 is related, because the issue only seems to affect Ionic v4 (I was unable to reproduce the issue on Ionic v3).

[malwatte]

I have two apps, one Ionic 4 and one Ionic 3. Both have the issue.

[hbsfaria]

I'm having this issue when the keyboard is opened and I try to display an alert. A blank/empty space remains where the keyboard was and the page does not resize.
The provided fix worked for me everywhere but one specific case so I tried something a little different:

this.keyboard.hide();
setTimeout(() => this.alertClientHasChanged(), 25);

In my case, this seems to be resizing the page properly.

[Ross-Rawlins]

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

[ippeiukai]

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.)

[peterpeterparker]

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

[qbikaris]

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

[mateusduraes]

Hi @qbikaris , are you using ion-slides in a vertical direction?
I have the same problem.

[malwatte]

Chrome 77 has been released. I tested on Pixel 2 and did not see any issue. Anybody tried Chrome 77 ?

[WouterWidgets]

Chrome 77 has been released. I tested on Pixel 2 and did not see any issue. Anybody tried Chrome 77 ?

Yes, this is also fixed for me after updating to Chrome 77.

[peterpeterparker]

Yes I could confirm too that it's fixed with Chrome77

Tested with two apps (Ionic Stencil PWA and Ionic Core/Vanilla PWA)

[jimtonique]

I just tested with different Ionic 3 apps and Chrome77 (Wiko View3) and it's still not working correctly. Some extra actions are required ?

[liamdebeasi]

Hi everyone,

I can also confirm that this issue is fixed in Chrome 77, so I am going to close this issue. For any new bugs feel free to open a new issue.

Thanks!

[ionitron-bot[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.