Клавиатура push up для контента в Ionic 3

Question

Я использую в своем проекте Ionic 3 и сетку для масштабирования на разных дисплеях.Проблема в том, что когда я нажимаю на вход, и клавиатура показывает, что содержимое лунки выталкивается вверх (см. Скриншоты).Странно то, что красное поле удерживается на месте, а содержимое под ним выталкивается вверх и перекрывает красное поле.Я подумал, что это может быть проблема с моими стилями CSS, но я прокомментировал все стили в файле login.scss, и это все та же проблема.

Это HTML

<ion-header>
</ion-header>
<ion-content class="background-color">
  <ion-grid>
      <ion-row>
        <ion-col></ion-col>
        <ion-col col-10>
          <div style="background-color:red; width: 200px; height: 50px;">
          </div>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
      <ion-row id="loginform" align-items-end>
        <ion-col></ion-col>
        <ion-col col-10>
            <form (submit)="doLogin()">
                <ion-list class="login-list">
                  <ion-item class="no-border-top transparent-color-input">
                    <ion-input placeholder="{{'EMAIL' | translate}}" class="login-text-size-normal border-bottom" type="email"
                      [(ngModel)]="account.email" name="email"></ion-input>
                  </ion-item>
                  <ion-item class="transparent-color-input">
                    <ion-input class="login-text-size-normal border-bottom" placeholder="{{ 'PASSWORD' | translate }}" type="password"
                      [(ngModel)]="account.password" name="password"></ion-input>
                  </ion-item>
                  <div padding>
                    <button class="login-button login-text-size-normal" block [disabled]="!userInputIsValid(account.email, account.password)">{{
                      'LOGIN_BUTTON' | translate }}</button>
                  </div>
                </ion-list>
              </form>
            </ion-col>
            <ion-col></ion-col>
          </ion-row>
          <ion-row id="loginlinks" align-items-center>
              <ion-col></ion-col>
              <ion-col col-10>
              <div class="login-links-wrapper">
                <div class="login-links login-text-size-normal">
                  <a (click)="clickForgotPw()">{{ 'FORGOT_PW' | translate }}</a>
                </div>
                <div class="login-links login-text-size-normal signup">
                  <a (click)="presentModal()">{{ 'SIGNUP' | translate }}</a>
                </div>
              </div>
              </ion-col>
              <ion-col></ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

Я уже гуглил по этому поводу, и то, что я уже пробовал, это

Это Не сработало

Это Не работает

Это Не работает

Это Не работает

Так кто-нибудь может мне помочь?Исправлена ​​ли эта проблема в Ionic 4?