CaptSaltyJack CaptSaltyJack - 2 months ago 12
CSS Question

CSS linear gradient transparency misbehaving only in Safari

Something really strange is happening in Safari. I'm doing a simple gradient overlay to do a text fade effect. It works fine in Firefox and Chrome, but not Safari, which I find strange since Safari and Chrome are both Webkit based.

Safari



enter image description here

Chrome and Firefox



enter image description here

CSS Code



.text-fade {
background: linear-gradient(to top, white, transparent);
bottom: 0;
height: 25%;
margin: 0;
position: absolute;
width: 100%;
}

Amy Amy
Answer

Instead of:

background: linear-gradient(to top, white, transparent);

Try setting your transparent to an rgba color value. For example:

background: linear-gradient(to top, white, rgba(255,255,255,0));

In other words, the rgb value of both colors should match. For example:

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

As defined by the w3c spec, transparent is black transparent (rgba(0,0,0,0)). That means that when you are in the middle of the transition, some black should appear.

The color seen in Safari is the correct one, as per the specs.

Comments