How to fix incorrect gradient rendering in Safari 12.0.3?

Question

css

I have the following code to set the background for an element:

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%);

In Chrome, this gradient is displayed correctly:

In Safari, on the contrary, it is not:

How to fix the indicated error?

Answer 1

You need to convert $header-gradto rgba and dance from it. Safari sees any transparent gradient as 0% black (or white? I don't remember). In short, if, for example, we want to make a fading red, then we write like this:

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));
}

Answer 2

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