Не работает background-color/image: linear-gradient в Safari

Рейтинг: 0Ответов: 1Опубликовано: 24.02.2023

Всем привет. Столкнулся с следующей проблемой: Неккоректно работает linear-gradient в Safari. При этом в остальных браузерах всё корректно.

1 фото

второе фото

На первом фото показано как работает в гугл. На втором как в Сафари. Там вообще не отображает.

CSS:

.menu__link {
    font-size: 1rem;
    text-decoration: none;
    color: #4A5568;
    display: flex;
    align-items: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.link-premium {
    position: relative;
    background-image: linear-gradient(to right, #8127b2 10%, #c135ef 50%, #6c00ff 100%, #6300ec 80%);
    background-size: 200% auto;
    background-image: -webkit-linear-gradient(to right, #8127b2 10%, #c135ef 50%, #6c00ff 100%, #6300ec 80%);
    color: #4A5568 !important;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
    -webkit-appearance: none;
    appearance: none;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}
<a href="" class="menu__link link-premium">Premium</a>

И проблема скорее в -webkit-text-fill-color: transparent; Когда я ставлю вместо transparent какой-то цвет, то работает и в сафари.

css safari кроссбраузерность
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Проблема была в версии Safari/IOS. Проверяли через второго человека у которого mac, iphone. У него в сафари все работает. С логотипом тоже самое было.