We have this view structure
<ion-tabs> <ion-tab> <ion-nav-view name="main-tab"> <ion-view hide-nav-bar="true"> <ion-header-bar class="bar bar-header"/><!-- a reusable content must be kept while inner content is changed as of result of user's action --> <ion-nav-view name="main-tab-suitable-content"> <ion-content has-tabs="true" class="has-header"></ion-content> </ion-nav-view> </ion-view> </ion-nav-view> <ion-tab> </ion-tabs>
The problem is caused by
.view-container class, which position property is specified as
top property is never set.
Thus, the first
<ion-nav-view/> is positioned absolute, then
<ion-header-bar/> is positioned relative, and then the second
<ion-nav-view/> is positioned absolute again. But in mobile Safari and in Emulator, a
top property of the second
</ion-nav-view/> is implicitly set to a height of the header (to 64px). The,
.platform-ios.platform-cordova:not(.fullscreen) .has-header, adds
top: 64px itself, that causes a content to be shifted unwilling down…
You have to check composite layouts in your Emulator, to fix this bug. At now I can only set
main-tab-suitable-content view manually.