Keyboard push up content in Ionic 3

Question

I use in my project Ionic 3 and the gridlayout to scale on different displays. The problem is when I tap into a input and the keyboard shows up the hole content is pushed up (see the screenshots). The weird thing is the red box keeps in place while the content under it is pushed up and overlaping the red box. I thought this is maybe a problem with my css styles but I out commented all styles in the login.scss and it's still the same problem.

This is the 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>

I already googled for this and what I already tried is

This Did not work

This Did not work

This Did not work

This Did not work

So does anyone can help me? Is this problem fixed by Ionic 4?