Repository navigation
Conversation
The md enter animation stayed applied to `.modal-wrapper` after it finished, because it used the default `both` fill and the overlay keeps the animation until dismiss. An element with an applied opacity animation is a backdrop root in Chromium, so `backdrop-filter` on content inside the modal could only see the modal itself and blurred nothing. The wrapper animation now uses a `backwards` fill and sets its end state (opacity 1, no offset) as inline styles when it finishes, so the modal looks the same but the finished animation is no longer applied.
|
@shkomg is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: part of #31603 (regular md modals; the sheet case stays open)
What is the current behavior?
In
mdmode the modal's enter animation stays applied to.modal-wrapperuntil the modal is dismissed (defaultbothfill, kept alive by the overlay). Since it animatesopacity, Chromium treats the wrapper as a backdrop root, sobackdrop-filteron content inside the modal only sees the modal itself and blurs nothing.What is the new behavior?
backwardsfill and sets its end state (opacity: 1,translateY(0px)) withafterStyles, so nothing stays applied to the wrapper once it has finished. The modal looks the same: the modal screenshot tests gave identical results with and without the change in a local run.backdrop-filterinside a regular md modal now blurs the page behind it, as it already does inios.modal/test/animationsthat checks the md wrapper has no animations left afterionModalDidPresentand ends at full opacity with no offset.Sheet modals have the same problem in both modes through the sheet enter animation, which the gesture drives afterwards. I left those alone to keep this small.
Does this introduce a breaking change?
Other information
The video shows a transparent md modal with a
backdrop-filter: blur(12px)card over a striped page, first with sharp stripes behind the card and then blurred with this change.ionic.mp4
The run starts the app from this branch and opens the modal from a small test page with a striped background, then holds on the card. It is an automated browser run, so the cursor is drawn on top.
Fix written with Claude Code; video is an automated browser run of this branch recorded by User Stories Bot.