Почему анимация выдвижения CSS в этом диалоговом модальном окне переходит в верхнюю часть страницы? ⇐ CSS

[Anonymous]

Я пытаюсь анимировать модальное окно, отображаемое при вызове HTMLDialogElement.showModal() — в частности, я бы хотел, чтобы оно «выдвигалось» и «выдвигалось» при открытии и закрытии соответственно.
В следующем фрагменте у меня есть и , где кнопка вызывает диалоговое окно шоуМодал(). Следуя советам в веб-документации MDN относительно анимации диалогов, я добавил CSS-анимацию для эффекта скольжения. Я специально решил использовать CSS-анимацию вместо переходов, поскольку @starting-style иtransition-behavior все еще относительно новы.
Для простоты я пропустил добавление кнопки внутри диалогового окна, которая его закрывает; диалоговое окно можно закрыть, нажав клавишу «Escape» на клавиатуре.

Код: Выделить всё

const button = document.getElementById("button");
const dialog = document.getElementById("dialog");
button.addEventListener("click", () => { dialog.showModal() });

Код: Выделить всё

dialog {
animation: slide-out-bottom 0.2s ease-out;
}

dialog[open] {
animation: slide-in-bottom 0.2s ease-out;
}

@keyframes slide-in-bottom {
from {
transform: translateY(100%);
display: none;
}
to {
transform: 0;
display: block;
}
}

@keyframes slide-out-bottom {
from {
transform: 0;
display: block;
}
to {
transform: translateY(100%);
display: none;
}
}

Код: Выделить всё

Open Dialog
Here is some dialog content.

Похоже, что этот фрагмент работает, но если вы быстро откроете и закроете диалоговое окно, будет казаться, что оно прыгает к верхней части страницы, а затем скользит вниз.
(Примечание: это также происходит с примером на странице MDN.)
Это Эффект «прыжка» становится еще более заметным, когда я присоединяю прослушиватель событий к элементу . В следующем фрагменте кода нажатие за пределами диалогового окна должно закрыть диалоговое окно и воспроизвести анимацию выдвижения.

Код: Выделить всё

const button = document.getElementById("button");
const dialog = document.getElementById("dialog");
button.addEventListener("click", () => { dialog.showModal() });
dialog.addEventListener("click", () => { if (event.target === dialog) { dialog.close(); } });

Код: Выделить всё

dialog {
animation: slide-out-bottom 0.2s ease-out;
}

dialog[open] {
animation: slide-in-bottom 0.2s ease-out;
}

@keyframes slide-in-bottom {
from {
transform: translateY(100%);
display: none;
}
to {
transform: 0;
display: block;
}
}

@keyframes slide-out-bottom {
from {
transform: 0;
display: block;
}
to {
transform: translateY(100%);
display: none;
}
}

Код: Выделить всё

Open Dialog


If you click on this text, the dialog won't close. Clicking outside will close it, though.

В этой ситуации щелчок за пределами диалогового окна, чтобы закрыть его, всегда приведет к его «подпрыгиванию». Я не понимаю, почему это происходит и как этого избежать.
Эта проблема возникает как в Microsoft Edge версии 141, так и в Google Chrome версии 141. Я не уверен, присутствует ли она и в Firefox.
Я подозреваю, что проблема как-то связана с неопределенным расположением элемента, но я не уверен.

Подробнее здесь: https://stackoverflow.com/questions/797 ... f-the-page