bug: collapsible large title header in modal is hidden with inline modals

[wibimaster]

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

Since #28277

In a page with :

<ion-header></ion-header>
<ion-content>
  <ion-header collapse="condense"></ion-header>
</ion-content>

If a modal is open, the opacity: 0 is applied on the background header (was not the case before). And, the style is not removed when the modal is closed.

Expected Behavior

The style should not be applied when open a modal (or, at least, be removed after modal close).

Steps to Reproduce

• Open a modal
• Close the modal

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 7.6.5-dev.11704916749.1e64a3a7 @angular-devkit/build-angular : 17.1.0 @angular-devkit/schematics : 17.1.0 @angular/cli : 17.1.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : 5.6.0

Utility:

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

System:

NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe) npm : 10.3.0 OS : Windows 10

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.

[liamdebeasi]

Can you provide a runnable sample I can use to reproduce the issue? I think I know what the issue is, but I want to be certain.

[wibimaster]

Can you provide a runnable sample I can use to reproduce the issue? I think I know what the issue is, but I want to be certain.

Yep: https://github.com/wibimaster/debug-ionic-28867 Branch main, just clone, npm i and run ionic serve

I have created an Ionic Angular project ionic start debug blank --type=angular --capacitor Then updated the @ionic/angular branch npm i --save @ionic/[email protected] Then updated home.page.ts and home.page.html to have a modal card, iOS style

Open it, close it, and the bug is here :)

[DavidStrausz]

You can use the following workaround until a fix is released. For me it's only happening when forcing iOS mode in an otherwise MD application for an ion-header element (mode="ios"). So you may want to apply the workaround only for md.

ion-header:not(.header-collapse-main):has(
      ~ ion-content ion-header[collapse='condense'],
      ~ ion-content ion-header.header-collapse-condense
    ) {
    opacity: 1;
  }

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing: 7.8.1-dev.11710452743.1ca99e5e

[DavidStrausz]

Thanks @liamdebeasi, the dev build fixes the issue in my apps!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/29164, 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 have any questions.

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