Элемент внутри <диалога> разрывы перевод анимации ⇐ Html

[Anonymous]

Я наткнулся на странное поведение, которое я не могу понять, и я не могу исправить его сам. Но когда элемент присутствует внутри Анимация сломана при открытии диалога. Обратите внимание, что при открытии анимации появляется шарнирная полоса. Однако, если я осмотрю div.modal-box2 высота верна и не увеличивается. />

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

.modal2 {
pointer-events: none;
display: flex;
&.modal-open, &[open], &:target {
pointer-events: auto;
.modal-box2 {
translate: 0 0%;
}
}
}

.modal-bottom2 {
:where(.modal-box2) {
translate: 0 100%;
}
}

.modal-box2 {
transition: translate 1s linear;
}< /code>
open modal



Hello!
Press ESC key or click the button below to close
Close

Вот https://jsfiddle.net/b5mg2wnr на всякий случай.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -animation