Navbar overlap with content

Ionic Framework ionic-v3
1

There are page A and B. Page A has a list who navigates to B. B has some input fields.
If I edit the fields and USE hardware back button(Android) to back to Page A. The title
and the list overlap.

html file

<ion-header>
    <ion-navbar >
        <ion-title>
            The Title
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content  style="background-color:#f2f2f2;">
    <ion-list  no-lines   >
        <ion-item *ngFor="let t of shortTrain">
            <h2 >{{t.name}}</h2>
            <p style="font-size:12px;">{{t.subtitle}}</p>
            <p style="font-size:12px;">
                <button ion-button color="secondary" round item-end (click)="toSignUpInfo(t.id,t.name,t.trainTime,t.deposit)">Click Me</button>
            </p>
        </ion-item>
    </ion-list>
</ion-content>```

![%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180627192420|410x482](upload://lWOzklio0HeKl1yubHYADJIVWYX.png)
2

Use software back button on the navbar works ok.

Any one could help me? Thanks a lot.