css - linear-gradient to transparent bug in latest safari?

Question

I'm applying a basic linear-gradient like this:

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

this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color:

here's chrome (how it is supposed to be):

and here's safari

I've tried prefixing it with -webkit-, changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this?

here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/

Answer 1

This has to do with the way browsers render transparent.

For most browsers,

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

But Safari renders it as

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

So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient.

But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.

This drove me crazy for a while.