Ios condense header

Ionic Framework Ionic Vue
1

I want to use 2 headers like shown in the docs condense header (for ios) and used the correct props like transfluent and collape, but this breaks my page transitions. My dev console shows following error:

Cannot read properties of null (reading ‘getBoundingClientRect’)
at createLargeTitleTransition (chunk-GHBCID63.js?v=0ecf4cc5:57:64)
at iosTransitionAnimation (chunk-GHBCID63.js?v=0ecf4cc5:272:35)
at animation (chunk-QARUQ2O5.js?v=0ecf4cc5:977:17)

If i remove the second header, my page transitions work like usual.

Here is my very basic “IonBase” component, which I use on every page.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button color="secondary" text="" />
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-menu-button color="primary" />
        </ion-buttons>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="contentFullscreen">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ title }}</ion-title>
        </ion-toolbar>
      </ion-header>
      <div :class="noContentPadding ? '' : 'ion-padding'">
        <slot />
      </div>
    </ion-content>
  </ion-page>
</template>
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonButtons,
  IonBackButton,
  IonMenuButton,
  IonTitle,
  IonContent,
} from '@ionic/vue'

interface Props {
  title: string
  noContentPadding?: boolean
  contentFullscreen?: boolean
}

withDefaults(defineProps<Props>(), {
  noContentPadding: false,
  contentFullscreen: true,
})
</script>
2

It would be best if you could provide a working example in StackBlitz or a repo so someone can easily replicate the issue and help you.

3

Here is a link for a basic repo: Github Repo

It is important that you simulate using an iOS device (for example with the chrome device toolbar). If you switch between the two pages, you wont see an animation and if you open the dev console, you will see the error as mentioned above.

4

I don’t have a solution for you, but removing ion-buttons also fixes it. I am guessing this is a bug in Ionic. Hopefully someone from the Ionic team can chime in. You could also create an issue on the repo.

5

That´s interesting with the ion-buttons…

6

I tested around and found out that the problem was the missing text on the ion-back-button - i didn´t want to use a text, so i just set it to an empty string, but that was the problem. If i set it to a string with a value, everything works fine… That is something they should change about the ion-back-button. I want to be able to remove the text. If i set it to null or undefined, the ‘Back’ text appears.

1 Like
7

This seems to do the job:

<ion-back-button text="&nbsp;" />
1 Like