Почему-то криво работает свойство градиента и transform в css. Имеется эффект куба, но на айфоне и маке криво работает. Не могу понять в чем проблема: Хром, Moz, Opera - всё как надо. Только Сафари.
Пример со стилями, которые "криво" работают:
.rew-owl {
background:#000;
padding:5% 10%;
}
.rew-owl .item {
aspect-ratio: 1;
margin: 0 0 107px 102px;
border: 1px solid #C9F175;
position: relative;
background: #000;
display: flex;
align-items: center;
color: #fff;
width:250px;
height:250px;
padding:3%;
}
.rew-owl .item::before, .rew-owl .item::after {
content: "";
position: absolute;
inset: -1px;
border: inherit;
}
.rew-owl .item::before {
transform-origin: 0 0;
transform: skewY(-44deg) scaleX(-.20);
-ms-transform: skewY(-44deg) scaleX(-.20);
-webkit-transform: skewY(-44deg) scaleX(-.20);
-moz-transform: skewY(-44deg) scaleX(-.20);
-o-transform: skewY(-44deg) scaleX(-.20);
background: linear-gradient(180deg, #C9F175 0.74%, rgba(201, 241, 117, 0) 100%);
}
.rew-owl .item::after {
transform-origin: 0 100%;
transform: skewX(-46deg) scaleY(-0.195);
-ms-transform: skewX(-46deg) scaleY(-0.195);
-webkit-transform: skewX(-46deg) scaleY(-0.195);
-moz-transform: skewX(-46deg) scaleY(-0.195);
-o-transform: skewX(-46deg) scaleY(-0.195);
}
<div class="rew-owl">
<div class="item">
<div class="in-rew">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
Ниже скриншоты с айфона и мака: