CODEWITHSUNDEEP
css
CaptSaltyJack
CaptSaltyJack

Reputation: 16025

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

Upvotes: 20

Views: 5176

Answers (1)

Amy
Amy

Reputation: 726

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.

Upvotes: 49

Related Questions