Bug 289474

Summary: Inability to have an exit animation on the backdrop of a dialog
Product: WebKit Reporter: Jeroen Zwartepoorte <jeroen.zwartepoorte>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bfulgham, graouts, karlcow, simon.fraser, zalan
Priority: P2    
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 15   

Jeroen Zwartepoorte
Reported 2025-03-10 10:45:12 PDT
If you are using `@starting-style` to animate the entry of a dialog+backdrop, there is no way to also animate the exit. There seems to be a proposal for an `overlay` property that only Chromium implements to far. This codepen showcases how you can do `transition: overlay 1s allow-discrete` to have an exit animation on the backdrop. See https://codepen.io/argyleink/pen/zYbQBOm for a complete example. Related to this, i filed https://bugs.webkit.org/show_bug.cgi?id=289473 for how dialog behaves on exit, without support for `overlay` atm.
Attachments
Jeroen Zwartepoorte
Comment 1 2025-03-10 13:16:00 PDT
The `overlay` property is from https://drafts.csswg.org/css-position-4/#overlay btw
Karl Dubost
Comment 2 2025-03-11 19:29:18 PDT
*** This bug has been marked as a duplicate of bug 276727 ***
Note You need to log in before you can comment on or make changes to this bug.