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.

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:

        <ion-title>Tab 2</ion-title>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
          <ion-title size="small">Tab 2 collapse</ion-title>
      <ExploreContainer name="Tab 2 page" />

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?

The collapsable header only works with ion-title size="large": https://ionicframework.com/docs/api/title#collapsible-large-titles. Does changing your ion-title to have size="large" fix the issue?

The other thing is make sure you have imported IonContent from @ionic/vue and provided it to your Vue component otherwise the Vue bindings will not work (I.e. :fullscreen="true").