title: background-attachment: fixed interfering with background-size
body: <p>I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size.</p>
  
  <pre><code>.wrap {
      width: 200px;
      height: 116px;
      position: absolute;
      background-image: url(image.jpg);
      background-attachment: fixed;
      background-position: 0 0;
      background-size: 200px 116px;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>Here's an example: <a href="http://jsfiddle.net/crowjonah/6xYNm/">http://jsfiddle.net/crowjonah/6xYNm/</a></p>
  
  <p>It looks beautiful in Chrome, Firefox, Safari (desktop and iOS), however I'm having trouble on some instances of Android.</p>
  
  <p>Here's a UA for a device that displays correctly:</p>
  
  <pre><code>Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
  </code></pre>
  
  <p>and here's a UA for a device that doesn't:</p>
  
  <pre><code>Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
  </code></pre>
  
  <p>The newer version of Android (emulated) scales the fixed background image to be all blown out and pixellated in order to fit (I think) the viewport, and does not heed the size of its container or the defined <code>background-size</code>.</p>
  
  <p>And that's all fine. In fact, that's what <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size">MDN says will happen</a>:</p>
  
  <blockquote>
    <p>If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.</p>
  </blockquote>
  
  <p>My problem is that I don't know how to reasonably detect when that will or won't be the case so that I can adjust accordingly. Because of the layout and animations on the page, I really do want the background to be fixed for all browsers that support it well, and can settle for <code>scroll</code> in this outlying case if I can figure out how to target it.</p>
  
  <p><strong>Update (10/3/2013):</strong>
  In order to prevent confusion, I've updated the fiddle to demonstrate a more realistic and problematic example that justifies more of the CSS properties I've defined: <a href="http://jsfiddle.net/crowjonah/QtpVN/">http://jsfiddle.net/crowjonah/QtpVN/</a></p>