CSS3 Gradient with transparency not displaying correctly in Safari

Question

This is a puzzle. The following gradient doesn't display correctly in Safari (works in Firefox and Chrome):

background: linear-gradient(transparent 124px, #de6230);

I have also tried:

background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);

Test it on Safari and you will see the issue: jsFiddle.

How do I fix this?

I can see the issue, very interesting. May be a browser bug? — Gary Woods, Feb 20 '17 at 18:52
Second one should work. @LGSon - [Check this out](https://www.w3.org/TR/css3-color/#transparent), it renders as `rgba(0,0,0,0)` which is probably adding some black tinge shade to the gradient/ — Mr. Alien, Feb 20 '17 at 18:58
@Mr.Alien Agree it should, OP said not, hence my comment ... don't have Safari though so can't do much more — Asons, Feb 20 '17 at 19:00
@LGSon The first part of that comment was for OP :) and same here, no Safari, but the place where I work, we have built a cross-browser testing platform online so I tested there :) — Mr. Alien, Feb 20 '17 at 19:02
Possible duplicate http://stackoverflow.com/questions/30673204/css-linear-gradient-transparency-misbehaving-only-in-safari — Asons, Feb 20 '17 at 19:23
Another funny possible duplicate http://stackoverflow.com/questions/38391457/linear-gradient-to-transparent-bug-in-latest-safari — Asons, Feb 20 '17 at 19:24

Marin Carroll · Accepted Answer · 2017-02-20T19:29:34.823

2

Try: background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);

Edit: sorry OP, that still doesn't look the same as your gradient although it is the correct colors, the gray middle just turned to a white middle. The solution I found was:

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);

222,98,48 is the rgb value of #de6230 so this should work. It's transitioning from your color at 0% alpha to your color at 100% alpha.

edited Feb 20 '17 at 19:29

answered Feb 20 '17 at 19:09

Marin Carroll

94
7

OP wrote they tried (255, 0, 0, 0) not (255, 255, 255, 0) – Marin Carroll Feb 20 '17 at 19:11
Are you kidding with me ... both have alpha 0, which mean fully transparent – Asons Feb 20 '17 at 19:13
2

But the browser is still showing part of it as it transitions away from transparent. That's why it's showing the gray color, because firefox (edit: whoops I meant safari) interprets transparent as black with alpha = 0%. – Marin Carroll Feb 20 '17 at 19:14
You are right though, that just replaces the gray problem with a white problem. The solution I found was to use background: linear-gradient(rgba(222,98,48,0) 124px, #de6230); – Marin Carroll Feb 20 '17 at 19:27
Outstanding; this is the one! Thank you so much! – Henrik Petterson Feb 20 '17 at 19:50

Paweł · Answer 2 · 2017-02-20T19:15:42.457

Try:

background: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);

or replace background with background-image

background-image: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: linear-gradient(rgba(255,0,0,0) 124px, #de6230);

Lets see if `background-image:` will make a difference – Asons Feb 20 '17 at 19:20 — Asons, Feb 20 '17 at 19:20

CSS3 Gradient with transparency not displaying correctly in Safari

2 Answers2

Linked