Ios condense header

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 posts - 2 participants

Read full topic