Как исправить некорректное отображение градиента в Safari 12.0.3?

Question

[sasha_jarvi]

Имеется следующий код для задания фона элементу:

background-image: linear-gradient(to bottom, #373c46, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(top, #373c46 0%, rgba(255, 255, 255, 0) 100%);

В Chrome данный градиент отображается корректно:

В Safari, наоборот, нет:

Как исправить указанную ошибку?

Comments

[Даниил Маслов]

https://caniuse.com/#search=linear-gradient

[Rustam Bainazarov]

Что за переменная? Пришлите скомпилированный CSS-код.

Более того, почему градиент с префиксом -webkit другой какой-то?

[sasha_jarvi]

Рустам Байназаров, код поправил, а градиент написан так, поскольку у -webkit-linear-gradient отличается синтаксис

[Rustam Bainazarov]

sasha_jarvi, это в каком году он отличался? И зачем он нужен, кстати? iOS 10 Safari уже без префиксов понимал градиенты, как и IE11.

Ну и значение переменной надо было изначально в вопрос написать.

Update. Уже начиная с iOS 6 не нужно было префиксов.
https://caniuse.com/#search=linear-gradient

Answer 1

[Антон Усачев]

Нужно перевести $header-grad в rgba и плясать от него. Сафари любой прозрачный градиент воспринимает как 0% черного (или белого? не помню). Короче, если, например, хотим сделать исчезающий красный, то пишем так:

elem {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
    /* ниже ваш цвет */
    background-image: linear-gradient(to bottom, rgba(55, 60, 70, 1), rgba(55, 60, 70, 0));
}

Comments

[sasha_jarvi]

Попробовал этот вариант, заработало. Благодарю!

Answer 2

[Валерий]

htmlbook.ru/css/-webkit-linear-gradient