Animating a modal element - dialog jumps to top of screen prior to animating out

I have a straightforward modal that I'm animating using @starting-style and allow-discreet set on the transition for display. The modal animates in with no issues but on clicking the close button or Esc the modal jumps to the top of the screen prior to animating out.

Unsure what I've missed to cause this behaviour.

Codepen

<button id="open-modal">Open Modal</button> <dialog class="modal" closedby="any"> <h1>DIALOG</h1> <form method="dialog"> <button>Close</button> </form> </dialog> <style> dialog { opacity: 0; transform: translateY(25rem); transition: opacity 1s ease-in-out, transform 1s ease-in-out, display 1s ease-in-out allow-discrete, overlay 1s ease-in-out allow-discrete; color: white; background-color: black; border-radius: 2rem; &[open] { opacity: 1; transform: translateY(0rem); @starting-style { opacity: 0; transform: translateY(25rem); } } &::backdrop { background-color: black; opacity: 0.5; } } </style> <script> if (document.getElementById("open-modal")) { const openModalButton = document.getElementById("open-modal"); const modal = document.querySelector(".modal"); openModalButton.addEventListener("click", function onOpen() { modal.showModal(); }); }; </script>