bug: collapsible large title header in modal is hidden with inline modals about ionic-framework HOT 4 OPEN

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.

from ionic-framework.

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.

from ionic-framework.

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 :)

from ionic-framework.

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;
  }

from ionic-framework.