Ionic-framework: bug: translucent toolbar blurred during page transition

[biesbjerg]

Bug Report

Ionic version:


[x] 4.8

Current behavior:

Title in toolbar is blurred during page transition.

Expected behavior:

Title should be clear.

Steps to reproduce:

1. Checkout conference app, add translucent="true" to ion-header and fullscreen to `ion-content.
2. Click a link to go to another back
3. Go back
4. Observe title is blurred until transition/animation is done

Related code:

<ion-header translucent="true">
    <ion-toolbar>
        <ion-title>Title is blurred during transition</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content fullscreen>
    Content
</ion-content>

[liamdebeasi]

Thanks for the issue. If you downgrade to Ionic 4.7.4, does this issue still occur?

[biesbjerg]

I can confirm 4.7.4 also have this issue (tested on Chrome, but bug originally noticed on iOS)

[DavidStrausz]

@liamdebeasi Will this get addressed before the v5 release? Makes translucent headers kind of unusable as it causes ugly flickers.

I may be able to help with a PR if needed.

[liamdebeasi]

A PR would be great if you are willing!

[DavidStrausz]

@liamdebeasi Cool, whats the design decision thats needed to get started? Or as you probably already thought about possible solutions internally, whats the preferred way of resolving this?

[liamdebeasi]

I had some time today to take a look. Can you try the following dev build and let me know if the issue is resolved for you: 5.0.0-dev.202001272042.c9dfe30.

It looks like this issue is happening because a) the backdrop filter is not being applied to the correct element and b) we are not transitioning the toolbar background properly during nav transitions.

[DavidStrausz]

@liamdebeasi Oh great - dev build fixes the transition! Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20314 and will be available in an upcoming release of Ionic Framework.

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