I accidentally discovered out that <ion-content> vertical size changes if I’m clicking an input field and device keyboard appears. After I closing keyboard - the height is still bigger that needed (and bigger than it was before) and I could scroll verticaly far beyond the visible area.
It looks like that framework adds some height to the <ion-content> to make sure that keyboard will not overflow available controls. But after hidding keyboard it should return to normal height, I believe…
Please advice - are any polyfills to fix that?
Here is my html code, nothing special - just a basic authentication form
<ion-content *ngIf="!auth.authenticated()" scroll="false">
<div padding>
<ion-segment [(ngModel)]="authType">
<ion-segment-button value="login">
Вход
</ion-segment-button>
<ion-segment-button value="signup">
Регистрация
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="authType">
<form *ngSwitchWhen="'login'" #loginCreds="ngForm" (ngSubmit)="login(loginCreds.value)">
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" [(ng-model)]='user.username' value="{{user.username}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Пароль</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<div padding>
<button block>Войти</button>
</div>
</form>
<!--Or we could switch to register New user form-->
<form *ngSwitchWhen="'signup'" #signupCreds="ngForm" (ngSubmit)="signup(signupCreds.value)">
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" ngControl="username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Пароль</ion-label>
<ion-input type="password" ngControl="password"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Повторите пароль</ion-label>
<ion-input type="password" ngControl="repeatPassword"></ion-input>
</ion-item>
<div padding>
<button block type="submit">Зарегистрироваться</button>
</div>
</form>
</div>
<!-- end of ngSwitch directive-->
</ion-content>