CSS linear gradient transparency misbehaving only in Safari

Question

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%;
}

score 49 · Accepted Answer · edited Sep 15 '16 at 20:25

49

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.

edited Sep 15 '16 at 20:25

neatonk

67
1
8

answered Jun 05 '15 at 19:28

Amy

726
8
5

Thanks for the suggestion. I already tried that, didn't fix it though. – CaptSaltyJack Jun 05 '15 at 19:29
Oh! Shoot, I see what I did wrong. You're right, it does work. Safari doesn't like the `transparent` keyword in gradients, apparently. Thanks! – CaptSaltyJack Jun 05 '15 at 19:35
1

Added a little explanation of the reason behind this. – vals Jun 06 '15 at 07:43
The only explanation that I have found so far that gives the root cause! Thanks! – sahilkhosla Jan 12 '17 at 18:30
7

_In other words, the rgb value of both colors should match._ -Thanks. This helped me a lot. – vaishali kapadia Jun 28 '18 at 10:29

CSS linear gradient transparency misbehaving only in Safari

Safari

Chrome and Firefox

CSS Code

1 Answers1

Linked