Только Webkit показывает удлиненное соотношение аспектов ⇐ Html

[Anonymous]

Это HTML -код внутри NextJs.

Этот код хорошо работает на хроме и Firefox.

, но выглядит ненормально на Webkit (ios chrome, safari).

только когда вы сначала доступны, элементы. />
Я думаю, что аспект-ритио является причиной.

Я не вижу желаемого результата без аспекта-ратио.

Как это исправить?
{`
.stackout {
background-color:#515151;
aspect-ratio: 1 / 1;
width: 100%;
border-radius: 50px;
text-align: center;
filter: none;
webkit-filter: none;
}
.stackin {
height: 100%;
width: 100%;
font-size: 80px;
border-radius: 50px;
color: white;
}
.stackoverlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: table;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50px;
}
.stackoverlay h1 {
display: table-cell;
vertical-align: middle;
}
.nodrag {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
`}



{/*

*/}
movie
Video

   

{/*

*/}
apps
Apps

   

{/*

*/}
code
Developer




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