275184 2024-06-05 15:11:13 -0700 CSS @starting-style element transitions in but does not transition out of DOM 2025-12-13 03:28:24 -0800 1 1 1 Unclassified WebKit CSS Safari 17 All All NEW https://bugs.webkit.org/show_bug.cgi?id=276727 InRadar P2 Trivial --- 1 asg86260 webkit-unassigned caugner graouts harald koivisto me ntim random_n0body webkit-bug-importer oldest_to_newest 2039965 0 asg86260 2024-06-05 15:11:13 -0700 @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 2041071 1 webkit-bug-importer 2024-06-12 15:12:13 -0700 <rdar://problem/129713289> 2046655 2 harald 2024-07-16 23:47:08 -0700 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 2046736 3 graouts 2024-07-17 08:34:36 -0700 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. 2046741 4 ntim 2024-07-17 08:58:33 -0700 Some of the demos don't work before they refer to the `overlay` property in their CSS transition declaration, which WebKit doesn't implement. 2046770 5 graouts 2024-07-17 12:12:14 -0700 Clicking the "Add" button on https://codepen.io/argyleink/pen/qBGOamz does not animate the new element in. 2046778 6 graouts 2024-07-17 12:25:21 -0700 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. 2064226 7 random_n0body 2024-09-30 06:39:50 -0700 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 2113115 8 caugner 2025-04-25 08:08:08 -0700 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) 2165620 9 me 2025-12-13 03:28:24 -0800 I think i'm hitting this issue. Two issues: 1. Basically my dialog slides out and the backdrop fades out perfectly in Chrome etc, but in Safari, as soon as the close event is triggered, the dialog loses it's top-layer and the header bar of my site jumps above it on the Z axis. 2. The backdrop fades in nicely but it snaps closed instantly rather than fading out like it should. Navigate to rctneil.co.uk. Narrow the browser until the menu button is visible at the top right. Click it to invoke the dialog that slides in and out from the right.