Faulty CSS3 gradient rendering in Safari?
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.
Up vote 0 down vote favorite share g+ share fb share tw.
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 Can anyone point me to a cause? Would be great! Thank you, guys.
Css css3 gradient link|improve this question edited Nov 12 '11 at 13:01Maerlyn8,2481919 asked Nov 11 '11 at 15:53user1018787867 75% accept rate.
My 27" monitor is 1920 pixels wide and hardware color calibrated. I cannot see anything like what you describe. Perhaps you can zoom in or increase contrast for your demo.
– Sparky672 Nov 11 '11 at 16:29 That is pretty strange indeed. Try zooming in to where the text "Title" is placed. Behind it you can see horizontal bars in the Safari example, while the Firefox example provides a smooth gradient.
– user1018787 Nov 11 '11 at 16:41 All the zooming in the world is not going to make something appear that is not there. (I tried. ) For my LCD, this is an issue of color contrast and I don't mess with that after I've calibrated.
– Sparky672 Nov 11 '11 at 16:57 Ok, I messed with my contrast... I still could not get it to appear. – Sparky672 Nov 11 '11 at 17:00 Alright, here you go: levels down with photoshop – user1018787 Nov 11 '11 at 17:07.
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.
Oh, that's pretty interesting. Together with the other CSS3 issues I encounter in Safari, I find it bewildering that Apple can't keep up with what Firefox offers. In any case, as I must be able to stretch those containers, I can't come up with images :/ Is there not any way to tell Safari how to behave when it comes to rendering the gradients?
– user1018787 Nov 11 '11 at 16:15 @user1018787 I actually have no idea, but I'm guessing not considering the w3c standard does not provide for it. But as long as you are using css3 you could use a background image and the background-size property set it to 100%. – Joseph Marikle Nov 11 '11 at 16:19 1 @user1018787, It's not an issue of "Safari keeping up with Firefox" at all.
Each one does it differently without a set of defined standards, so who is to say which method is correct? Perhaps Safari gradients look better than Firefox under a different set of circumstances. – Sparky672 Nov 11 '11 at 16:26 @Sparky672 no... no they don't.... just... no.
:P Although, in all seriousness you are correct. It is browser implementation specific. And thus notoriously lacking in standards.
– Joseph Marikle Nov 11 '11 at 16:29 Indeed, basically I would not come up with such an opinion, but I have experienced issues with border-radius clipping as well (which I wasnt able to solve by using the background-clipping property). We all know it is a pain in the head that browsers must be so different from one another. Regarding the issue at hand, I am working on a back-end, so I have the luxury of forcing the client to use firefox (which seems totally misplaced, given the fact that its just about the gradients).
The problem is: Firefox performs worse with Javascript and the CSS3 transition animations :( – user1018787 Nov 11 '11 at 16:33.
I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.