bug: backdrop-filter on content inside an ion-modal (md) blurs nothing — the finished enter animation stays applied to .modal-wrapper for the modal's whole lifetime #31603

Ionic Framework Version

v9.x (9.0.7)

Current Behavior

A transparent ion-modal (--background: transparent) containing an element with backdrop-filter: blur(12px) over a striped page:

Why md and not ios: the md enter animation (core/src/components/modal/animations/md.enter.ts L17–20) animates opacity and transform on .modal-wrapper; the ios one (ios.enter.ts L18) animates transform only. Ionic keeps the enter animation alive after it finishes — utils/overlays.ts L895–898 stores it in activeAnimations and only destroys it on dismiss (L823–827) — and its WAAPI fill defaults to both (utils/animation/animation.ts L304–311). After present() resolves, .modal-wrapper.getAnimations() still returns one animation: playState: "finished", fill: "both", keyframes opacity 0.01 → 1. Chromium treats an element with an applied opacity animation as a backdrop root, so a descendant's backdrop-filter samples only the wrapper's own (transparent) subtree.

Control without Ionic, same element and background: a finished fill: both animation with transform only → 5 (blur works); with opacity + transform → 127 (blur is a no-op). Cancelling the animation restores the blur in the control.

Expected Behavior

Content inside a presented modal can use backdrop-filter to blur the page behind it, in both modes.

Steps to Reproduce

1. Page with background: repeating-linear-gradient(90deg, #000 0 6px, #fff 6px 12px).
2. mode="md" ion-modal with --background: transparent; --box-shadow: none, containing <div style="width:300px;height:200px;backdrop-filter:blur(12px)">.
3. present(); the stripes behind the div stay sharp. Switch to mode="ios": blurred.

Ionic Info

@ionic/core 9.0.7, Chromium 142 (Playwright headless).