title: Fix for background-attachment bug in Chrome
body: <p>When viewing this site <a href="http://jsfiddle.net/dN4S4/1405/" rel="nofollow noreferrer">http://jsfiddle.net/dN4S4/1405/</a> on chrome with a Mac retina display the background is not correctly rendered. This is the CSS used:</p>
  
  <pre><code>body{
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
  }
  #cards{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .card-wrapper{
      width: 100%;
      height: 100%;
      background: url(url here);
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
  }
  .card{
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.875);
      font-family: "Helvetica Neue", Helvetica, Arial;
      font-size: 14px;
      text-align: left;
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>I found out that this is a known issue but have not found a fix that actually works. It renders as expected on any other browser and even works fine in chrome when viewing the site with a "normal" display.</p>
  
  <p>For simplicity I am using the same image in the demo, however I want to use different images creating the "parallax" effect.</p>
  
  <p>Please not that "position: absolute" on the body does not cause this issue. It also occurs with different "position" and "display" values.</p>
  
  <p>Any suggestions on how to make it render correctly?</p>
  
  <p>Thanks!</p>