Абсолютно позиционированный элемент растягивает область просмотра при масштабировании ⇐ CSS

[Anonymous]

У меня есть абсолютно позиционированный SVG внутри родительского элемента . Когда я анимирую свойство Transform SVG с помощью ключевых кадров и масштабирую его в направлении Y, оно расширяется, но также растягивает область просмотра. Кажется, что на самом деле он не удаляется из потока документов, как должно быть, а скорее отображается как дочерний элемент тела.
Эффективная разметка:
< pre class="lang-html Prettyprint-override">

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

Эффективные стили для родительского элемента:

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

.container {
overflow-x: hidden;
width: 100vw;
height: 100vh;
position: relative;
}

Эффективные стили для SVG:

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

.img {
width: 260%;
rotate: 180deg;
height: 75px;
transform-origin: bottom;
z-index: 1000;
position: absolute;
}

Обратите внимание, что у меня установлена ​​относительная позиция для родительского элемента, так что абсолютное позиционирование дочернего SVG вступит в силу.
Полная разметка:

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

Ключевые кадры CSS из моей конфигурации Tailwind:

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

'grow-snow': {
'0%': { transform: 'scale(-10, 1)' },
'100%': { transform: 'scale(-1, 3)' }
}
// ...
'grow-snow': 'grow-snow 30s linear both 10s'

Снимки экрана после завершения анимации:


Как видите, область просмотра можно прокручивать, но больше ничего не отображается. При наведении курсора мыши в DevTools элемент SVG оказывается ниже основного, хотя он должен быть над ним.
Предполагаемый эффект заключается в том, что нижний край часть SVG остается привязанной к нижнему краю основного, что означает, что документ на данный момент должен иметь ту же высоту, что и область просмотра, и, следовательно, его нельзя прокручивать.

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

body {
margin: 0;
padding: 0
}

@keyframes grow-snow {
from {
transform: scale(-10, 1);
}
to {
transform: scale(-1, 2);
}
}

.container {
position: relative;
overflow-x: hidden;
height: 100vh;
width: 100vw;
}

.flexbox {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;
padding: 6rem;
}

.svg {
position: absolute;
bottom: 0;
animation: grow-snow 10s linear both 5s;
width: 260%;
rotate: 180deg;
height: 75;
transform-origin: bottom;
z-index: 1000;
}

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

foobar

Подробнее здесь: https://stackoverflow.com/questions/792 ... hen-scaled