CSS Gradients with little content: Fix has problem with Chrome

I asked a question CSS Gra开发者_如何转开发dients with little content some time back

I came up with a possible fix http://jsfiddle.net/aruUS/2/

html, body { min-height: 100% }
body { 
    background: -moz-linear-gradient(top, blue, red 200px); 
    background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}

only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?

Simply remove the px from 200px. Pixel values are unitless in Webkit's gradient syntax. I.e.

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));

See the Surfin' Safari blog's Introducing CSS Gradients:

A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.

Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.

try this:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

More information for -webkit-gradient visit: http://webkit.org/blog/175/introducing-css-gradients/

Live example: http://jsfiddle.net/aruUS/3/

Tool to help you more: http://gradients.glrzad.com/