bug: Collapsible Large Titles Flicker

[seanaguinaga]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

With version 7, the collapsed title flashes upon navigation

Does not happen with version 6

https://user-images.githubusercontent.com/15254340/228694868-c1a59b02-84a3-41eb-93ea-cae83d9294f7.mov

Please see video ^

Expected Behavior

Would not flash, as in version 6

Steps to Reproduce

upgrade to version 7

see flash on collapsed title

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI : 6.20.8

Utility:

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

System:

   NodeJS : v18.15.0
   npm    : 9.5.0
   OS     : macOS

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[seanaguinaga]

hey @liamdebeasi how do I give you access to a private monorepo?

[liamdebeasi]

I recommend reproducing this in an Ionic starter application and providing a link to the repo. This way you can have a minimal reproduction without providing any secret/private code.

[seanaguinaga]

https://github.com/seanaguinaga/large-title-repro

A little different - duration is longer - but I'm certain it's the same cause

Thank you for all that you do Liam (and team) - Ionic is amazing (as you know)

[seanaguinaga]

Also happens here on mlynch's repo on first render

https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter

[milanharia]

@liamdebeasi @amandaejohnston I have managed to recreate this with an ionic starter project, it is clearly visible when you make the content a different colour other than white.

This is the code for my page:

<IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen color="primary">
        <IonHeader collapse="condense">
          <IonToolbar color="primary">
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonContent>
    </IonPage>

https://user-images.githubusercontent.com/76167627/231127546-2bb987c4-793e-422e-9cba-171edf43bf0e.mp4

[thetaPC]

@seanaguinaga please provide a video clip of the flickering that you are experiencing on your repo, large-title-repro. This would allow us to track the bug easier since I have not been able to replicate it on your repo.

[thetaPC]

@milanharia please provide the reproduction that you mention. I wasn't able to replicate it using the React Tabs starter and this is a tricky bug.

[seanaguinaga]

Title comes in showing - note the name of the person on the navigated to page

https://github.com/ionic-team/ionic-framework/assets/15254340/c23c0688-9fb8-4c4f-8fd1-2532beda6464

[seanaguinaga]

Here's the fast flicker on refresh of that detail page

https://github.com/ionic-team/ionic-framework/assets/15254340/577f2808-cceb-4bb0-b9e6-9d6da610f37f

[thetaPC]

Thank you! I was able to replicate the issue by building the project to iOS.

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing: 7.4.3-dev.11696365694.156f41d3

Install Example:

npm install @ionic/react@7.4.3-dev.11696365694.156f41d3 @ionic/react-router@7.4.3-dev.11696365694.156f41d3

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28277, and a fix will be available in an upcoming release of Ionic Framework. Feel free to keep testing the dev build, and let me know if you run into any issues.

[moerphie]

@liamdebeasi #28277 hasn't fixed it for me.

<template>
    <ion-page ref="xxxpage">
        <ion-header :translucent="true">
            <ion-toolbar>
                <ion-title>XXX</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content :fullscreen="true">
            <ion-header collapse="condense">
                <ion-toolbar>
                    <ion-title size="large">
                        XXX
                    </ion-title>
                </ion-toolbar>
            </ion-header>
        </ion-content>
    </ion-page>
</template>

"@ionic/vue": "7.5.0",
"@ionic/vue-router": "7.5.0",

https://github.com/ionic-team/ionic-framework/assets/12500071/89cf9b4d-5566-4285-a9fc-aeda86ec2f2d

[liamdebeasi]

Please file a new issue with a reproduction case.

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