Modal exit animation debugging

If I click outside this

<dialog>

<dialog>

and then press

Esc

Esc

, it shifts to the top of the screen while playing the exit animation. If I press

Esc

Esc

while still focused within the

<dialog>

<dialog>

it stays in place. Has anyone encountered this / found a solution? Codepen link: https://codepen.io/ptrfrncsmrph-the-vuer/pen/QWRqJPW

CodePenPeter Murphy

Modal animations exit/enter

...

Pete (he/him)OP•6/19/24, 7:43 PM

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

PPete (he/him)The example was mostly copied from this post https://developer.chrome.com/blog/e...

Kevin Powell•6/20/24, 6:25 PM

You need to add to the transition as well.

An easier way to do it is list all the transitions as you normally would, but then use the longhand afterwards. Covers all the bases then, and won't impact ones that don't need it.

Pete (he/him)OP•6/20/24, 6:53 PM

Oh nice

that makes my example work, and I see the blog post example does include on the (but still seems jumpy if you focus outside the

<dialog>

<dialog>

before closing, maybe there's something else going on there...)