2

I'm trying to render gradient and it's collor is different on safari and chrome. How to make it identical? (Left - chrome, right - safari).

https://codepen.io/max-frai/pen/XWMEQZJ

<div id="test"></div>
#test {
  width: 400px;
  height: 300px;
  background: -webkit-linear-gradient(top,  rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
  background: linear-gradient(to bottom,  rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}

enter image description here

Max Frai
  • 61,946
  • 78
  • 197
  • 306

1 Answers1

1

You can find a good explanation of what is going on here. Basically, this has been in the working draft for years now, and Safari is the only major player who hasn't fixed it. See current status here:

Partial support in Safari and Older Firefox versions refers to not using premultiplied colors which results in unexpected behavior when using the transparent keyword as advised by the spec.

I guess if you were desperate, you could calculate the gradient yourself and put in a lot of stop points. Otherwise just wait for Apple to fix.

wordragon
  • 1,297
  • 9
  • 16