Modal exit animation debugging
If I click outside this
<dialog> and then press Esc, it shifts to the top of the screen while playing the exit animation. If I press Esc while still focused within the <dialog> it stays in place. Has anyone encountered this / found a solution? Codepen link: https://codepen.io/ptrfrncsmrph-the-vuer/pen/QWRqJPW3 Replies
The example was mostly copied from this post https://developer.chrome.com/blog/entry-exit-animations#animating_elements_to_and_from_the_top-layer and I see that the bug appears there too 😦
Chrome for Developers
Four new CSS features for smooth entry and exit animations | Blog...
Learn about new capabilities that enable smooth transitioning of discrete animations and between the top layer
You need to add
allow-discrete to the overlay transition as well.
An easier way to do it is list all the transitions as you normally would, but then use the transition-behavior: allow-discrete longhand afterwards. Covers all the bases then, and won't impact ones that don't need it.Oh nice 👍 that makes my example work, and I see the blog post example does include
allow-discrete on the overlay (but still seems jumpy if you focus outside the <dialog> before closing, maybe there's something else going on there...)