Линейный градиент для прозрачной ошибки в последнем сафари?

Question

я применяю основной линейный градиент, как это:

background-image: linear-gradient(to top, red, rgba(0,0,0,0)); 

это ведет себя, как это предполагается всюду, за исключением сафари, где прозрачный визуализируются как черновато/сероватый цвет:

здесь хром (как это должно быть):

и вот сафари

Я попытался предваряя его -webkit-, меняя rgba к rgba(0,0,0,0.001), но он никогда не переходит в твердый прозрачный. это ошибка? есть ли способ исправить это?

вот скрипка https://jsfiddle.net/2Lrp3sv1/2/

Answer 1

я вижу это в Safari тоже. Для меня он бледнеет до светло-красного цвета, хотя ни один из цветов, которые я использую, не находится рядом с красным.

Я решил использовать его, используя «прозрачность» в качестве значения. Как только я прекратил использовать rgba, это выглядело как ожидаемое.

Answer 2

Это связано с тем, как браузеры визуализируют transparent.

Для большинства браузеров,

transparent === rgba(255,255,255,0)

Но Safari делает это как

transparent === rgba(0,0,0,0)

Итак, если у вас есть градиент от transparent к white (или rgba(255,255,255,1)), для большинства браузеров 'только изменение альфа от 0 до 1 вдоль градиента.

Но для Safari, вы изменяете альфа от 0 до 1 и цвет от 255 к 0, так что вы получите градиент оттенков серого.

Это немного сбило меня с ума.