keyboard pushes content upwards with ionic

I am new to ionic and i am designing a login page. However i noticed when i deploy the app to an ios device, the native ios keyboard pushes the content upwards when a input field is clicked/pressed on.

I have been trying to figure out how to solve this issue, but i have had no luck. I am currently using the latest ionic framework.

Is there a way where i can ensure content is not pushed up?

here is my login html:

<ion-content class="background" [fullscreen]="true" slot="fixed">
<h1 class="login-title-text">ign you in</h1>
<p class="login-subtitle-text">Welcome back!</p>

<div class="inputs">
<ion-input class="item-input" type="email" placeholder="Email"></ion-input>
<ion-input class="item-input" type="password" placeholder="Password"></ion-input>
</div>
</ion-content>

<ion-footer>
<ion-button color="dark" expand="block">Login</ion-button>
<ion-button color="dark" expand="block">Forgot Password</ion-button>
<ion-button color="dark" expand="block">Register</ion-button>
</ion-footer>


Here is my scss:

ion-content {
--keyboard-offset: 0px;
}

.background {
--background: url("/assets/img/background.jpg") no-repeat fixed center;
}

.login-title-text {
font-weight: bold;
font-size: 28px;
padding: 50px 0 20px 30px;
}

.login-subtitle-text {
font-size: 18px;
padding: 10px 0 20px 30px;
}

.inputs {
padding: 30px;
}

.item-input {
border: 1px solid grey;
border-radius: 10px;
height: 50px;
text-indent: 10px;
margin-bottom: 20px;
}

ion-footer {
padding: 30px;

ion-button {
margin-bottom: 20px;
}
}

Continue reading...