<rdar://problem/129713289>

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

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.

Some of the demos don't work before they refer to the `overlay` property in their CSS transition declaration, which WebKit doesn't implement.

Clicking the "Add" button on https://codepen.io/argyleink/pen/qBGOamz does not animate the new element in.

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.

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

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)