CODEWITHSUNDEEP
csssafarigradientlinear-gradients
Syren
Syren

Reputation: 2051

Issue with CSS3 gradient in Safari

I tried to replicate a starburst effect using CSS3 gradients. After much fiddling, I figured it out, only to test it in Safari and have it go nuts. It's like Safari is using 180deg where Chrome would render 270deg or something.

Here's the code: http://codepen.io/syren/pen/Ahkrv

Any input you have would be very helpful. Thanks in advance!

Update: I noticed that on this tutorial: http://camenischcreative.com/blog/2011-04-26, the same bug occurred in Chrome, but worked in Safari. I noticed that they used -90deg to 90deg, so I rewrote my -webkit-gradient- prefixed gradients in that range and now it works. And since Chrome uses linear-gradient, it uses the 180deg to 360deg gradients and it works.

I left the problematic prefixed gradient commented out, to see the problem, uncomment it.

So my problem is solved, but I'm still really curious if anyone else has encountered this problem and why do you think it is?

Upvotes: 2

Views: 3455

Answers (1)

FatDog47
FatDog47

Reputation: 462

The reason is in the "overlay" you did not included all vendor specific gradients properties.

Missing vendor-prefixed CSS gradients for Firefox 3.6+, Old Webkit (Safari 4+, Chrome), Opera 11.1+.

If you want to support those browser too, you have to do something like this:

/* FF3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
/* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
/* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* IE10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* W3C */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

You are only using webkit-linear-gradient and linear-gradinet.

Upvotes: 2

Related Questions