css3 linear gradient color stop works differently on webkit

Question

refer to: www.get-offit.com

Go to where the book cover almost ends and the background color changes:

We have:

html {
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(5, #FFFFFF), to(#EEEEEE));
background: -webkit-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);

}

If you open the site with firefox, you get a clear cut line between the white and the gray without any gradients going on:

If you open the site with chrome, you get a 5px'ish gray gradient where the white ends and the gray begins:

How do I make it so that the colors stop abruptly without going showing actual gradients on webkit browsers as it currently does on firefox?

Cheers G

Answer 1

Try using this css tool at Microsoft's site (Yep, Microsoft):

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

It will help generate cross-browser css code (not just IE) and could also come in handy with changing up the gradient effects a bit. You can add more gradient points and even try different colors.

Here's a code sample from the online tool:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EEEEEE));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

Answer 2

From some attempts to reproduce this in a test case, it appears the issue may be that Webkit's implementation has trouble calculating the exact height of html when there's no height specified directly. Setting a height of 100% or a fixed pixel height seems to clear it up. However I doubt that's a practical solution. In my own use I've not noticed this as an issue with other elements, so maybe it's particular to the use of a linear-gradient on html .

If it is a bug with Webkit, then your best solution maybe to rework your css so that the grey background can be applied to an element. Obviously that's a big change to accomodate Webkit, but it would also make the background compatible with older versions of IE as well.

Answer 3

This is just a difference between webkit & gecko. Unfortunately on such large gradient sizes it looks like webkit takes the 'fast' route for rendering enormous gradients (don't forget that gradients are browser-generated images ) and throws in some vagueness to it.

Try using background-position-y: 500px; to force the gradient to begin 500px from the top in webkit.

See fiddle: http://jsfiddle.net/3ampp/

Answer 4

你试过这个吗？

background: -moz-linear-gradient( top, #FFFFFF 500px, #EEEEEE 520px );

Answer 5

I think you will have to leave the gradient aside if you want to achieve the solid transition from #fff to #eee in webkit. If you set your css up like this

html {
   background: #eee; 
   }

   body {
      background: #fff;
      height: 500px;
      }

it will replicate what you are trying to achieve using the gradient. (See screen shot) It will also be cross browser compatible. I hope this helps.

Answer 6

This works for me in all browsers:

html {
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -webkit-linear-gradient(#FFFFFF 500px, #EEEEEE 0px);
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
}

Although a gradient is not needed for the effect you are trying to achieve.

Answer 7

As egid stated, chrome does take the fast route for rendering gradients. see this SO question and this pen for a cool animated demonstration.