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.

Answer 2

No browser renders transparent as rgba(255, 255, 255, 0), that's completely wrong. transparent is always rgba(0,0,0,0), as defined in the CSS Color 3 specification. However, a few years ago we changed how color interpolation works in gradients and specified it should happen in a premultiplied RGBA space, exactly to fix this issue and make interpolation with transparent work as expected. Looks like other browsers have implemented this change, but Safari hasn't yet. If you want gradients with Safari to look the same, you need to use color stops that utilize the transparent version of the color you are interpolating to/from (which may sometimes require two color stops at the same position, if these colors are different), in this case linear-gradient(to top, red, rgba(255,0,0,0)). Or just wait for Safari to catch up! :)

Answer 3

i am seeing this in Safari, too. For me, it is fading to a light red, even though none of the colors I use is anywhere near red.

I solved it using 'transparent' as the value. Once I stopped using rgba, it looked like expected.