Bug 275184
| Summary: | CSS @starting-style element transitions in but does not transition out of DOM | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Andrew <asg86260> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Trivial | CC: | caugner, graouts, harald, koivisto, ntim, random_n0body, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | All | ||
| OS: | All | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=276727 | ||
Andrew
@starting-style doesn't apply transitions for removing elements.
steps to reproduce:
1. the examples MDN gives here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#examples
and here https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
2. both the dialog element and popover element will apply the @starting-style and transition the element in,
but when closing the popover or dialog the transition out does not apply.
expected results:
the element has the same transition applied to the @starting-styles defined when transitioning the element out.
tested in
- Version 17.5 (19618.2.12.11.6)
- Safari Technology preview Release 195 (Safari 17.4, WebKit 19619.1.15.0.1)
- iOS 17.5.1 Safari
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/129713289>
Harald
Here is another example: https://codepen.io/argyleink/pen/qBGOamz
Featured in this article: https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects#exit-stage
Antoine Quint
I tested the listed links with a 281013@main build and found the following:
- https://codepen.io/argyleink/pen/qBGOamz: everything works the same as in Chrome Canary except for the dismissal of the <dialog> which moves to the top of the page as it fades out.
- https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style: the "Show the popover" demo does not work, the popover animates in briefly but very quickly disappears.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#examples: several demos don't seem to work, and it's hard to distinguish them within the page, but I think the issues are similar to the ones above.
It's not clear to me that these issues all stem from the same problem, so we'll need to diagnose each issue and break them out in individual bugs as needed.
Tim Nguyen (:ntim)
Some of the demos don't work before they refer to the `overlay` property in their CSS transition declaration, which WebKit doesn't implement.
Antoine Quint
Clicking the "Add" button on https://codepen.io/argyleink/pen/qBGOamz does not animate the new element in.
Antoine Quint
The `overlay` support / exit algorithm is tracked by bug 276727.
I think this bug should focus on the "Add" button issue on https://codepen.io/argyleink/pen/qBGOamz.
Daniel
Is the backdrop not animating in when clicking the button here (contrary to what it does in chrome) part of this bug? https://codepen.io/depict_daniel/pen/XWvmPee
caugner
It looks like Safari 18.4 applies transitions for removing elements, i.e. the 2nd and 3rd example on the MDN page work as expected: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
However, transitions are sometimes not applied when adding elements, see: https://jsfiddle.net/ymnujoLt/ (based on https://github.com/mdn/browser-compat-data/issues/25643)