bug: App content pushed down by keyboard

[TheaMorin]

Type: bug

Platform: android 4.4 webview

The issue occurs on certain Android devices, such as an Xperia Z3 Compact running 4.4, an Android Note on 4.4, and some other larger-screened devices running 4.. This issue does not appear on the Nexus line of devices running 5. (We do not have a Nexus device running 4.*)

The issue does not occur in Ionic Beta 12 (our previous version), we only started to experience it after updating to Ionic Beta 14.

Steps to Incur

Initially, everything is normal.

The issue pops up after the keyboard is shown. For example, on the Sony device, after clicking "Login", we show an Ionic loading notification, then transition to a new state. Because the keyboard is up before this, at some point during this process, it gets lowered. However, after it's lowered, the app seems to compensate by lowering the space of the keyboard again!

Note that touches registered in the white area above the page will touch the Ion-content as you'd respect. For example, tapping the top-left of the app below the status bar would register a touch on the navigation menu button.

Also, after a while and some playing around on the app, the page will fix itself, often without even a state change.

[Ionitron]

Can you please provide a codepen

[TheaMorin]

I'm having a lot of trouble recreating this problem with a fresh Ionic app for Codepen. Is there anything that we'd need to really update after moving to Beta 14 (created it around Beta 3 and didn't have any issues up until our update from Beta 12 to 14)?

I've discovered some other symptoms of the problem that I think are related.

Firstly, it doesn't have to be $ionicLoading. I can also create the issue by holding the keyboard up and invoking an $ionicPopup.

Of significant note, the page is not large enough to warrant scrolling, but it is large enough once the keyboard is open. At this point, I cannot scroll even though I should be able to. I tried creating a new blank sidemenu app and sure enough, adding an input to a short page will let me scroll after the keyboard is up. This may hint further at the cause of the issue.

I will continue to attempt to debug in the current app and work to recreate the issue in a fresh one for a Codepen, but until then, I am stumped.

It is unfortunate because I do see a lot of things that could go wrong. I have numerous plugins (ng-translate, Angular QR, Camera plugin, ng-cordova, Phonegap NFC, Ionic keyboard), 30+ views, and many core services/factories that could all contain some source of error.

I've tried:

• Replacing Ionic's files
• Comparing the config.xml from a blank sidemenu app to ours and trying its settings
• Comparing the AndroidManifest.xml similarly
• Changing the length of the page (a smaller page gets a smaller white header, a scrollable page still sees the issue, up to the size of the keyboard)
• A bunch of random assorted "fixes" by Ionic and PhoneGap users from around the web for similar issues (viewport, manifest stuff)

Is there anything that may hint at what would cause this viewport being pushed down and also not letting me scroll while the keyboard is up? I'm very open to experimentation.

[TheaMorin]

Further digging into this... it has nothing to do with how the keyboard is hidden. I have boiled it down to:

• Even just using the back button to hide the keyboard can trigger the issue.
• It only happens when the keyboard causes the the view to shift in order to keep the input in view.

Things I've tried (continued):

• I replaced the login and sidemenu HTML with HTML from a fresh app. The issue still occurred (though it does not occur on the fresh applications)
• I switched to Beta 13, and the issue is not present, but I'm not on AngularJS 1.3 anymore.

[TheaMorin]

Eureka! I believe I have found the issue. It was caused by this in app.js:

    var showFullScreen = false, showStatusBar = true;
    $ionicPlatform.ready(function () {
        ionic.Platform.fullScreen(showFullScreen, showStatusBar);
    });

Replacing that with the default from a new app:

    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
    });

It seems to have fixed the issue of not scrolling while keyboard is up, as well as the white header issue.

[TheaMorin]

As an addendum to anyone who encounters this, you don't need the "styleDefault" or the "hideKeyboardAccessoryBar" as in the code above. The culprit is actually

ionic.Platform.fullScreen(false, true);

I can actually reproduce this issue on a new app, finally. It would appear that there is an Android bug relating to this call.

[TheaMorin]

Please try building this codepen for Android. You can enable the bug by clicking on one of the lower input fields (such that your page will need to scroll when the virtual keyboard rises) and then backing out with the device's back button. It may take a couple tries. Notice the white bar at the top of the screen. I'll upload a video shortly.

The obvious fix is to remove the ionic.Platform.fullScreen call, but perhaps this information will be useful to the Ionic team.

A video of the issue:
https://plus.google.com/107988991267634509073/posts/S1HRX3pBvMd

[tlancina]

Well you win bug report of the year... Thanks for drilling down into this!

The codepen insta-breaks on a 4.4 device and is definitely a bug, taking a look now.

[maruthi-menlo]

Hey Guys,

I'm facing similar issue in my ionic app. Can anyone let me know the solution for this issue?

@tlancina Please suggest.

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