CODEWITHSUNDEEP
htmlcssgradient
user796443
user796443

Reputation:

safari and firefox vs chrome - css gradients

I've encountered a peculiar situation, chrome vs safari + firefox there is a very big difference in the way gradients are rendered.

observe: http://jsfiddle.net/k9z6pt7z/

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(56,56,56,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#383838',GradientType=0 ); /* IE6-9 */

I think chrome one is the correct version, how do I make safari + ff behave in the same way?

left safari, right chrome.

enter image description here

Upvotes: 4

Views: 1051

Answers (1)

Code Uniquely
Code Uniquely

Reputation: 6373

The short answer is that you don't.

The long answer is that there is no specific method mandated for how they are supposed to get from your starting gradient values to your end values. Hardware acceleration would pass this over to the rendering engine of any graphics card, but how the vendor deals with it would be different by rendering engine just as none hardware gradient fills will be left to the individual browser engines.

If you really need them to as close as possible then (notice I didn't say identical) then you're going to have to resort to using an over sized image as a background and adjusting its position to fit the area available. All of which means slightly different results at different screen sizes.

Of course some browsers wont render a gradient at all.

If you really want to you could try changing the starting and values and percentages and but that's a lot of work and the effectiveness depends on how good your users monitors are, so not really that useful.

So in reality does it really matter to the user (not you). It will appear fairly similar (even close) if they did happen to switch between browsers (why would they) and always be consistent when used on a particular browser. The fonts will render differently between browsers the rendering of the mark-up will have differences between the same browser on different OS / platforms.

The important thing in not about being pixel identical on every platform / OS / browser, because that's just not possible. but instead about giving your users clear, consistent access to the information that they need.

Upvotes: 2

Related Questions