ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

ion-content not correctly sized when hardware keyboard active on Android #1055

Open moldstadt opened 4 years ago

moldstadt commented 4 years ago

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior:

If I create a page with a transparent ion-footer with multiple lines of content and a background image for the page, and then open keyboard on Android, the content is partially visible behind the footer.

Expected behavior:

The content should remain hidden behind the footer, like it is when the keyboard is not active.

Steps to reproduce:

Start a new ionic blank project and change the home page as below. Build and run on Android emulator. Notice that the content text is behind the footer. Select the input box to show the keyboard, and notice that the text is now visible behind the footer.

Related code: home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <ion-item>
    <ion-input placeholder="enter some text"></ion-input>
  </ion-item>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Footer line 1</p>
    <p>Footer line 2</p>
    <p>Footer line 3</p>
  </ion-toolbar>
</ion-footer>

home.scss:

page-home {
    ion-content {
        background-image: url('../../assets/imgs/logo.png');
        background-size: cover;
        background-position: center center;
        }

    .toolbar-background {
        background: rgba(128, 128, 255, 0.5);
    }
}
insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

$ ionic info

Ionic:

   ionic (Ionic CLI)  : 4.12.0
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.4

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v10.15.3
   npm               : 6.4.1
   OS                : Windows 10