Как пофиксить кнопки на iOS в safari?

Question

[Nimbus1996]

Кнопки ломаются в safari на айфонах, проблема в transform, как можно пофиксить это, есть идеи?

CSS:

main__link-query{
        position: relative;
        font-family: "FranckerW-SemiBold";
        font-weight: 600;
        font-size: 20px;
        line-height: 20px;
        z-index: 1;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 70px;
        cursor: pointer;
        transition: .2s;
        &::before,
        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            background: radial-gradient(170.66% 2296.43% at -8.83% -25%, #3093EF 0%, #144DA3 100%);
            transform: perspective(9px) rotateX(179deg);
        }
        &::before{
            left: -1px;
            bottom: -4px;
            width: 302px;
            height: 72px;
        }
        &::after {
            left: 2px;
            right: 0;
            top: 4px;
            bottom: 0;
            width: 296px;
            height: 67px;
        }
        &:hover{
            color: #087DEA;
        }
        &:hover::after,
        &:hover::before {
            background: rgba(2,6,10,0.1);
            backdrop-filter: blur(15px);
        }
        &:hover::before{
            border: 3px solid #087DEA;
        }
    }

Answer 1

[Vyach Gor]

добавьте в стили -webkit-transform: perspective(9px) rotateX(179deg)
и в следующий раз все таки советую пользоваться автопрефиксером, если нет возможности работать с gulp, grant, webpack - то хотя бы пропускайте через онлайн инструмент перед релизом - link

Comments

[Nimbus1996]

В том-то и дело, что работаю с gulp и там есть автопрефиксер, но попробую прописать вручную, спасибо

[Vyach Gor]

ну тогда надо смотреть уже по месту, по тому как в том куске кода что вы предоставили как раз префиксов и не хватает, еще было бы неплохо если проблемный код сразу в codepen залили бы.