CSS3 Firefox radial gradient disappears

Question

I've got an HTML5 page with the background of:

background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);

This works fine, until the page gets long (15000px or so), at which point the background disappears entirely on Firefox.

Looking elsewhere provided me with two solutions that won't work for this. They were to use html & body height 100%, or background-attachment:fixed. Both match the gradient height to viewport, not document height.

This works fine for shorter pages, but breaks in FF on longer ones. Is there a CSS trick I could use without restructuring my html?

Answer 1

Try specifying a min-height on the HTML node:

Demo: http://jsfiddle.net/SO_AMK/76cyn/

CSS:

html {
    min-height: 100%;
}

body {
    background: radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -o-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
}

Or, if you want a fixed background: http://jsfiddle.net/SO_AMK/76cyn/1/