title: Background-attachment:fixed Not Working - Android Chrome (v40)
body: <h1>Background</h1>
  <p><em>( This has been <a href="https://stackoverflow.com/questions/19028851/background-attachmentfixed-not-working-in-chrome">asked</a> <a href="https://stackoverflow.com/questions/17664927/background-attachment-fixed-not-working-on-android-mobile">before</a>, <a href="https://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with">many times</a>, I know. However, it seems to have been caused by different things each time. I have gone through about four different StackOverflow answer threads and tried everything. Nothing seems to be working anymore, so I believe this is a new problem. )</em></p>
  <p>Anyway, I have an HMTL element with a background image that needs to be fixed, using <code>background-attachment:fixed;</code></p>
  <ul>
  <li>All desktop browsers - Works</li>
  <li>Mobile Firefox - Works</li>
  <li>Default Android/Samsung Browser - Works</li>
  <li><strong>Mobile Chrome - Doesn't Work</strong></li>
  </ul>
  <p>I've spun the problem into a more simple replicable test, which is a single <code>section</code> element, set to<code>200%</code> of the page height, with the background being full-screen and fixed.</p>
  <hr />
  <h1>Code</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
      padding:0;
      margin:0;
      height:100%;
      width:100%;
  }
  section {
      background-position:center center;
      background-attachment:fixed;
      background-size:cover;
      background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
      height:200%;
      width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;Test&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <h1>JSFiddle For Testing</h1>
  <p>For easier testing on your smartphone than a code snippet: <a href="http://jsfiddle.net/LerLz1L2/" rel="noreferrer">http://jsfiddle.net/LerLz1L2/</a></p>
  <hr />
  <h1>Things I've Tried</h1>
  <ul>
  <li><code>backface-visibility: hidden;</code></li>
  <li><code>-webkit-backface-visibility:inherit;</code></li>
  <li><code>-webkit-transform: translate3d(0,0,0);</code></li>
  <li>Setting element and all parents to <code>position:static</code></li>
  </ul>