I have started a new ionic project. When emulating in chrome via iOS device, I have white space in between the top header toolbar and the header toolbar in the ion-content section.
It appears that the top toolbar has position: relative, and visibility: initial, so the white-space remains in between the two toolbars.
The code is basic:
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="small">Tab 2 collapse</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 2 page" />
</ion-content>
</ion-page>
</template>
Just launch a new ionic project, open it in chrome and emulate as iOS refresh page, you will see the issue. You may need to populate the page with a bunch of lorem ipsum to get it to scroll.
when i load the page, it displays the toolbar for “Tab 2 collapse”. when i scroll down it displays the “Tab 2” toolbar with no white space.
Seems like the top toolbar needs to be display: none rather than visibility: hidden whenever its hidden. if the top toolbar is set to display:none, the white space disappears.
another fix i found was to set position: absolute on the first header toolbar.
.header-ios { position: absolute; }
I am currently using this fix ^^
Any ideas?