Keyboard overlaps the text input when the input is placed inside an <ion-footer>

[ionitron-bot]

Short description of the problem:

When an <ion-input type="text"> is placed inside an <ion-toolbar> in an <ion-footer>, the iOS keyboard overlaps text inputs placed in an <ion-footer> and the entire page "jumps" when the input receives focus.

What behavior are you expecting?

I would expect the text input to be shown above the keyboard so the user can see what they're typing, similar to what happens in the Messages app on iOS. I also wouldn't expect the entire page to jump down immediately after the input receives focus.

Steps to reproduce:

1. Create a new project with the blank template
2. Add the following to home.html, run the app on iOS, and focus on the text input

<ion-footer>
    <ion-toolbar>
        <ion-input type="text" placeholder="Add a message..."></ion-input>
    </ion-toolbar>
</ion-footer>

Which Ionic Version? 1.x or 2.x
2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.3.1 Build version 7D1014

[zardilior]

still not solved i believe

[prescindivel]

same problem in 2019 after chrome update 76.x

[MohamedPHPD]

if you use
statusBar.hide();
tray don't use it and close app and reopen it
it work with me

[zangzimi]

Any update on this? Android doesn't work!

[exequielc]

Any updates ? I've working with Ionic4 and I wish to know if there's any solution with this issue