Как решить проблему в градиентом в safari?

Question

[R4tm4n]

Проблема в том что даю элементу фон градиентом вот так :
background: linear-gradient(to right, transparent, #fff)
background: -webkit-linear-gradient(to right, transparent, #fff)

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

Answer 1

[idexdv]

Используй первым цвтом не transparent, а rgba(white,.0001) - например.

#scss
background: linear-gradient(to right, rgba(white,.0001), #fff)

Comments

[Den Alex Smith]

Шикарно. Работает даже так:

background: linear-gradient(to right, rgba(255,255,255,0), #fff)

Answer 2

[Rustam Bainazarov]

Старая особенность рендеринга градиентов в Safari, которую никак не исправят.

Дополняя ответ idexdv, можно сказать, что проще вот так:

background: linear-gradient(to right, #fff0, #fff);
/* Нуль в конце #fff0 означает полную прозрачность цвета,
и теперь градиент нормально работает в т. ч. и в Safari */