Opening keyboard in Ionic 4 Android app moves the background image up

问题

I have tried two options in my AndroidManifest.xml

android:windowSoftInputMode="adjustResize" and android:windowSoftInputMode="adjustPan"

With adjust adjustResize it pushes up my background image so that it looks pretty rubbish. It also allows this weird white section if you scroll down. See the 2nd and 3rd image.

If I use adjustPan it looks great and fixes the problem but on devices with lower resolution inputs are hidden by the keyboard and users can't get to them as scrolling is not possible.

Ideally I want the background image to act like adjustPan but the inputs/other content to act like adjustResize.

Also is it possible to change this setting dynamically e.g. depending on which page you are one?

Edit added code:

    <ion-content no-bounce has-bouncing="false" forceOverscroll="false">
      <div class="content">
        <div>
          <ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
        </div>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
          <ion-grid>
            <ion-row class="row-padding-one"></ion-row>
            <ion-row>
              <ion-col size-sm="6" offset-sm="3" class="input-col">
                <ion-item class="custom-item" lines="none">
                  <ion-input 
                    class="login-input"
                    type="text"
                    formControlName="email"
                    [formControl]="loginForm.controls['email']"
                    placeholder="E-Mail"
                    required>
                  </ion-input>
                  <div *ngFor="let validation of loginValidationMessages.email">
                    <div class="error-message"
                     *ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
                      {{validation.message}}</div>
                  </div>
                </ion-item>
...


.content {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
  background-size: cover !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left;
}

回答1:

try to put background image for ion-content of that page. This will solve the issue!

回答2:

Your can do like this:

ion-content{
    --background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}

it will resize your inputs and other content but your Image always will be 100%;

回答3:

add your css to

.scroll-content {
  padding-bottom:0!important;
}

this is known issue in

https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19

for more info

https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/9

来源：https://stackoverflow.com/questions/57567205/opening-keyboard-in-ionic-4-android-app-moves-the-background-image-up