bug: Cannot set property 'innerText' of null at animateLargeTitle (only iOS | Vue 3)

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: Getting an error and animation dont play when navigating from one page to another.
It only happens in iOS.

It behaves exactly the same as in issue #22760 only in vue.

Expected behavior: The error shouldn’t happen and animation should be played.

Steps to reproduce: If an example is still needed i can create a stackblitz.

Ionic info:

Ionic:

   Ionic CLI       : 6.14.1
   Ionic Framework : @ionic/vue 5.6.8

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

[liamdebeasi]

Thanks! The problem is you have your collapsible large title configured incorrectly. It should look something like this:

<ion-header :translucent="true">
  <ion-toolbar>
    <ion-title> {{ greeting }} </ion-title>
    <ion-buttons slot="end">
      <ion-button router-link="/test" routerDirection="forward" color="dark">
        <ion-icon :icon="timeOutline" size="large" />
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content :fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar class="tab-toolbar">
      <ion-title size="large"> {{ greeting }} </ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

Making this change resolved the issue on my end. For more information please see the Collapsible Large Titles docs.

[liamdebeasi]

Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the repo?