Issue with background color and Google Chrome

Sometimes I get a broken background in Chrome. I do not get this error with any other browser.

This is the simple CSS line responsible for the background color of body:

body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}

This is exactly how I get this problem. I click a link included in an Gmail's email and I get something wrong (no background). I then refresh the page and the background is colored completely.

How do fix this problem?

Never heard of it. Try:

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}

Ok guys, I found a solution, . It's not great but does the trick with no side effects.

The HTML:

<span id="chromeFix"></span> 

(put this below the body tags)

The CSS:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }

What this does to solve the issue:

It forces Chrome to think the page's content is 100% when it's not - this stops the body 'appearing' the size of the content and resolves the missing background bug. This is basically doing what height: 100% does when applied to the body or html but you don't get the side effect of having your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.

I can sleep now =]

I had the same issue on a couple of sites and fixed it by moving the background styling from body to html (which I guess is a variation of the body {} to html, body{} technique already mentioned but shows that you can make do with the style on html only), e.g.

body {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;

}

becomes

html {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
}
body {
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;
}

This worked in IE6-8, Chrome 4-5, Safari 4, Opera 10 and Firefox 3.x with no obvious nasty side-effects.

I was able to fix this with:

html { height: 100%; }

HTML and body height 100% doesn't work in older IE versions.

You have to move the backgroundproperties from the body element to the html element.
That will fix it crossbrowser.