bug: iOS style fade header color missmatch

[Dimibe]

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

v8.x

Current Behavior

When using iOS style and fade headers in a modal dialog the fade header no longer matches the content color when the ion-content has color="light"

This behaviour is present since Version 8.7.1:

For some modals I was able to fix this issue with setting the color on the ion-toolbar but for sheet-modals I didn't found a solution.

Expected Behavior

Before version 8.7.1 the fade header color would match the ion-content color:

Screenshot taken with version 8.7.0:

Steps to Reproduce

Basic modal setup which produces the error with ionic Version >=8.7.1:

<ion-modal >
    <ion-header collapse="fade">
      <ion-toolbar>
        <ion-title>Settings</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content color="light" fullscreen>
    </ion-content >

Code Reproduction URL

https://stackblitz.com/edit/xyvcuvsv?file=src%2Fcomponents%2FExample.vue

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 8.7.1

Utility:

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

System:

   NodeJS : v22.14.0 (/Users/dbegnis/.nvm/versions/node/v22.14.0/bin/node)
   npm    : 10.9.2
   OS     : macOS Unknown


  ───────────────────────────────────────────────

     Ionic CLI update available: 7.2.0 → 7.2.1
         Run npm i -g @ionic/cli to update

  ───────────────────────────────────────────────

Additional Information

No response