How to stop the white from appearing when scrolling down on an html page?

Question

I have a gradient background in an html document defined as such in CSS:

body {
    /*background-color: #1A0F0F;*/
    /*color: #D7D7D7;*/
    /*height: 100%;*/ /* come back to this */
    margin: 0;
    background: -webkit-linear-gradient(green, black); 
    background: -o-linear-gradient(green, black); 
    background: -moz-linear-gradient(green, black); 
    background: linear-gradient(green, black);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

The background gradient is definitely there, but it does this annoying thing where when I scroll, the gradient disappears on the bottom rectangle and it is just white- Specifically, this is on a Mac opening up the document on Google Chrome but it also seems to happen on Safari.

Any ideas what would be causing this?

Answer 1

The reason this is happening is because of overscroll (or "elastic scrolling") in OSX.

You can't give the overscroll area, which defaults to white, a gradient colour. But you can however style it with a solid colour.

Simply set the background property to style the overscroll area, and use background-image to set your gradient, like so:

body {
    background: black;
    background-image: linear-gradient(black, green);
}

This is a bit of a hack and unfortunately only really helps with either the top or the bottom of the page, but should look less jarring than white.

It's worth noting that this is only a requirement in Google Chrome, Safari should respect the background gradient during overscroll.