CODEWITHSUNDEEP
csssafari
Henrik Petterson
Henrik Petterson

Reputation: 7094

CSS3 Gradient with transparency not displaying correctly in Safari

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?

Upvotes: 0

Views: 1090

Answers (2)

Marin Carroll
Marin Carroll

Reputation: 94

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.

Upvotes: 2

Paweł
Paweł

Reputation: 75

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);

https://www.w3schools.com/Css/css3_gradients.asp

Upvotes: 0

Related Questions