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

Chrome and Firefox

CSS Code

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

Answer 1

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.