bug: large title transition does not work with dynamic font scaling

[aeharding]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

The header shrink/grow animation between pages has regressed in v7.5 and the animation is now jumpy. It's very apparent with dynamic font scaling, but still apparent even without.

Expected Behavior

Animation should be completely smooth

Steps to Reproduce

With v7.5:

1. Use repro below, or: setup an app with an IonHeader, with a home and details page. On the home page it will be the larger header with no rendered toolbar, and on the details page the "Home" text should shrink to become the back button.
2. Use dynamic font scaling (e.g. html { font-size: 24px }) In my repro, this is in app.css
3. Transition to and from the details page. Observe the "Home" text jumps around.
4. Also observe the "Home" text jumps even without the dynamic font scaling, (although only a couple px, much less perceptible)
5. Revert to v7.4. Observe no jumping, completely smooth

Code Reproduction URL

https://github.com/aeharding/test-header-font-bug

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

       Require stack:
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

       Require stack:
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/index.js
       - /Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 7.1.1 (/Users/aeharding/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.4.0

Capacitor:

   Capacitor CLI      : 5.5.0
   @capacitor/android : not installed
   @capacitor/core    : 5.5.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.15.0 (/Users/aeharding/.nvm/versions/node/v18.15.0/bin/node)
   npm    : 9.5.0
   OS     : macOS Unknown

Additional Information

Ionic v7.5 with html { font-size: 2em }

Kapture.2023-10-13.at.08.21.27.mp4

Ionic v7.5 with dynamic font scaling OFF (still a slight glitch at end of animation)

Kapture.2023-10-13.at.08.22.12.mp4

Ionic v7.4 (looks good)

Kapture.2023-10-13.at.08.23.38.mp4

[liamdebeasi]

Thanks! We're fixing this as part of #28290. (The PR needed some extra time for review, so it didn't make 7.5.0)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.