linear-gradient to transparent bug in latest safar

问题:

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/

回答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.

回答2:

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.