0

Почему-то криво работает свойство градиента и 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>

Ниже скриншоты с айфона и мака:

Макбук: Айфон 10:

1 ответ 1

1

У вас как-то всё в кучу, px % дробные части... Такое впечатление что бездумно копипастите их Figma насчитаный код. То, что вы поназадавали через префиксы -o- -webkit- ... в той записе как вы отобразили никогда работать не будет. (Почитайте как их задавать) Вы уверены что в 2022 они нужны, или это от отчаянья уже лепите? Для начала поробуйте вынести в отдельный 'div' а не через псевдокласс. Если это не сработает, всегда можно заменить ваш пример на SVG элемент который будет работать 100%

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.