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/QWRqJPW
3 Replies
Pete (he/him)
Pete (he/him)β€’2mo ago
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
Kevin Powell
Kevin Powellβ€’2mo ago
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.
Pete (he/him)
Pete (he/him)β€’2mo ago
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...)