Modal exit animation debugging

If I click outside this

<dialog>

<dialog>

<dialog>

<dialog> and then press

Esc

Esc

Esc

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

Esc

Esc

Esc

Esc while still focused within the

<dialog>

<dialog>

<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 allow-discreteallow-discrete to the overlayoverlay 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-discretetransition-behavior: allow-discrete 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 allow-discreteallow-discrete on the overlayoverlay (but still seems jumpy if you focus outside the

<dialog>

<dialog>

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