CODEWITHSUNDEEP
cssgradient
SQRCAT
SQRCAT

Reputation: 5840

Faulty CSS3 gradient rendering in Safari

I am experiencing an issue with CSS3 gradients within a backend i am developing.

Firefox is rendering the gradient fine, but Safari creates strange extra lines of the same colour withing the gradient.

See the images for comparison.

Safari / Firefox

(http://i.imgur.com/ZDCCv.png) (http://i.imgur.com/R4abk.png)

Can anyone point me to a cause? Would be great! Thank you, guys.

Upvotes: 0

Views: 487

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

The colors used do not have enough contrast. What you're seeing is a browser implementation of what to do when there is not enough color depth supported. Safari takes an approach where it "guesses" what the intermittent, unsupported colors are, making what appear to be lines. Firefox takes another approach. It uses what's called dithering, where it takes a bit of one color and speckles it over the other color to give the appearance of gradation where there isn't enough contrast.

Possible solutions are increase the contrast or make a gradient in Photoshop or whatnot and apply the dithering manually.

Upvotes: 1

Related Questions