title: Choppy scrolling in chrome with big background images
body: <p>I've created a web page, and it has 7 six sections with huge background images using <code>background-size: cover;</code>. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU. </p>
  
  <p>I've uploaded the page so you can test it: <a href="http://baaemail.com/beta" rel="nofollow">http://baaemail.com/beta</a> (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy. </p>
  
  <p>The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events. </p>
  
  <p>I'm using <code>background-size: cover</code> because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using <code>img</code> tag instead of backgrounds.</p>
  
  <p>What should I do?
  thanks.</p>