I recently faced this issue with two of my apps when testing with Ionic View and Dev App. I am using the latest Ionic CLI and templates (v 3.18.0). The problem is that when adding pages to my app, for no reason, pages appear with different header (ion-header) height on the device. This causes the title of some pages overlap with phone status bar.
Here is an example from one of my apps in Ionic DevApp:
The app has a main page (Dashboard), tapping on existing items opens “Page 1” and selecting New Item, opens “Page 2”:
Both pages have exact the same HTML header
<ion-header>
<ion-navbar color="primary">
<ion-title>Page 1</ion-title>
</ion-navbar>
</ion-header>
<ion-header>
<ion-navbar color="primary">
<ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
and both are navigated to in same way:
this.navCtrl.push('Page1');
this.navCtrl.push('Page2');
In Ionic View I see both pages with the short header!
Please let me know if anybody else is experiencing the same problem.