fix: iOS fade header color missmatch

core/src/components/modal/modal.tsx

@@ -644,6 +644,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
       await waitForMount();
     }
 
+    // Recalculate content dimensions before showing the modal so the initial
+    // paint uses the final content offset and background geometry.
+    await this.recalculateContentDimensions();
+
     writeTask(() => this.el.classList.add('show-modal'));
 
     // Recalculate isSheetModal before safe-area setup because framework
@@ -1517,6 +1521,18 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.applyFullscreenSafeAreaTo(contentEl, hasFooter);
   }
 
+  /**
+   * Recalculates the inner ion-content dimensions after the modal has mounted so
+   * its offsets and background geometry reflect the modal's final size before it is shown.
+   */
+  private async recalculateContentDimensions(): Promise<void> {
+    const contentEl = this.el.querySelector('ion-content') as HTMLIonContentElement | null;
+
+    if (contentEl) {
+      await contentEl.recalculateDimensions();
+    }
+  }
+
   /**
    * Sets --internal-content-safe-area-padding-bottom on the given ion-content
    * when no footer is present, so ion-content's .inner-scroll includes

core/src/components/modal/test/basic/modal.spec.tsx

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../../modal';
+import { Content } from '../../../content/content';
 import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 
 describe('modal: htmlAttributes inheritance', () => {
@@ -39,3 +40,25 @@ describe('modal: focus trap', () => {
     expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false);
   });
 });
+
+describe('modal: content dimensions', () => {
+  it('should recalculate ion-content dimensions before presenting', async () => {
+    const page = await newSpecPage({
+      components: [Content, Modal],
+      template: () => (
+        <ion-modal overlayIndex={1} animated={false}>
+          <ion-content color="dark">Test Content</ion-content>
+        </ion-modal>
+      ),
+    });
+
+    const modal = page.body.querySelector('ion-modal')!;
+
+    const recalculateSpy = jest.spyOn(Content.prototype, 'recalculateDimensions').mockResolvedValue(undefined);
+
+    await modal.present();
+    await page.waitForChanges();
+
+    expect(recalculateSpy).toHaveBeenCalledTimes(1);
+  });
+});