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 absolute
, but 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 top:0
to main-tab-suitable-content
view manually.