Dialog consistency between Chrome and Safari
Hi,
I've got a very simple dialog here: https://codepen.io/rctneil/pen/ByNyzGY. I've stripped it back from all styles to aid in getting help. I've added polyfills for closedby and the invoker commands.
Basically, it works perfectly in Chrome but in Safari, there are several issues.
1. When closing, it jumps to the top.
2. On closing it doesn't animate out.
Can anyone help?
8 Replies
Anyone able to help?
Honestly it looks like a bug in Safari. Not much to be done besides maybe trying to absolute position the element so it stays put š¤·
I don't think it's a bug, as much as it is Chrome doing a little more to help out with their user-agent-styles.
Chrome's user agent styles keep it as
display: fixed as long as it's in the top layer (which it is while it transitions out, thanks to your transition on the overlay).
Safari doesn't do this, it just has the styling for when it's dialog:modal - so as soon as you close it, it looses the position: fixed and other associated styles that center it.
Because dialog is in the HTML spec, and not the CSS spec, the associated styles are only a suggestion, rather than a rule. Safari uses the suggested styles from the spec, google goes a little further to make it easier to work with.
(the suggested user agent styles from the HTML spec are here, if you're curious: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3)@13eck.c @Kevin Ok, I've managed to stop the "jump to top" on close, but the backdrop doesn't fade out on close like it does in Chrome. Any suggestions?
https://codepen.io/rctneil/pen/ByNyzGY
I think it might be a bug...? safari doesn't expose ::backdrop in the devtools from what I can find, so that doesn't help
I just found this bug report for webkit: https://bugs.webkit.org/show_bug.cgi?id=275184
latest comment seems to say things are working, but it's definitely not working on the mdn page with backdrop either.
@Kevin Ok, yes it is super annoying. I'll keep a watch on those topics and reports. Can i make a suggestion for a video that focuses exclusively on dialogs and especially how to animate them and their backdrops both in and out. with explainers on why styles are needed for the main element, starting-style and the open pseudo. Also talk on why the overlay property need transitioning. All those have confused me greatly and to have one comprehensive explainer video just focusing on that would be very very useful. I've still not found anything that explains starting style and overlay simply and clearly.
I covered them in this video. I forget how in-depth I went on overlay though.
https://youtu.be/vmDEHAzj2XE
Kevin Powell
YouTube
We can now transition to and from display: none
Start writing CSS with confidence š https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay
š Links
ā
Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations
ā
Open Web Docs: https://openwebdocs.org/
ā Timestamps
00:00 - Introduction
00...