title: Background image disappears on scroll and page reload in Chrome
body: <p>I'm trying to set a background image in my section tag on the home page of my website. It works with the following CSS, but the problem is whenever I scroll down and scroll back up, or refresh the page after scrolling halfway down (where the section that I set the background image is out of view), the image disappears (leaving the background to be white). If part of the section is still in view when I refresh the page, only that part of the image shows the image and everything above it turns white, leaving an empty gap where the rest of the image is supposed to be. </p>
  
  <p>The weird thing is if I try to select the image with my mouse or do Control-A to select everything on the page, the parts of the image that are selected appear where it's supposed to be, which means it's there but just not showing up for some reason. </p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="homePage"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.homePage{
      background: url(../images/background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
  }
  </code></pre>
  
  <p>What's the cause of this problem and what's the remedy?</p>