Абсолютно позиционированный элемент растягивает родительский элемент при масштабировании ⇐ 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 остается привязанной к нижнему краю основного, что означает, что на данный момент документ должен иметь ту же высоту, что и область просмотра, и, следовательно, его нельзя прокручивать.

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