bug: collapsible large title flickers when collapse prop is not reflected on host

[moerphie]

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

Collapsed title flashes when switching tabs

Preview.mov

Expected Behavior

No flashing expected

Steps to Reproduce

1. Clone this repo: https://github.com/moerphie/ionic-title-flicker
2. yarn run install && yarn run dev
3. Launch Safari and navigate through the tabs

Code Reproduction URL

https://github.com/moerphie/ionic-title-flicker

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.5.3

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v16.17.0 (/usr/local/bin/node)
npm : 9.6.7
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. I applied a fix for this #27060, but I did not account for when the collapse attribute is not reflected on the element. I'll work on fix for this.

[liamdebeasi]

Can you give this dev build a try and let me know if things look better?

 npm i @ionic/vue@7.5.4-dev.11699282935.1db450b0 @ionic/vue-router@7.5.4-dev.11699282935.1db450b0

[liamdebeasi]

Thanks for the issue. This has been resolved via #28472, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to keep testing the dev build, and let me know if you have any questions.

[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.