White space between collapsable toolbars

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.

[Album] imgur.com

It appears that the top toolbar has position: relative, and visibility: hidden, 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.

Any ideas?

1 post - 1 participant

Read full topic