title: iOS Webkit ignoring media queries
body: <p>I'm working on a website (<a href="http://www.villa-antonia.com/nueva" rel="nofollow noreferrer">villa-antonia</a>) using mobile-first development approach. That is, I CSS for mobile first and then add/overwrite styles with media queries for higher resolutions.
  The thing is, in iPhone, a background image is loading on top of everything, in spite of being inside a media query for a higher resolution.</p>
  
  <p>This is part of the CSS file (the part I think is involved):</p>
  
  <pre><code>body {
    background: #c70000;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Minimum width of 960 pixels. */
  @media only screen and (min-width: 960px) {
  
    body {
      background: transparent url('images/bg.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
    }
  }
  </code></pre>
  
  <p>In my understanding of CSS, iPhone shouldn't even load the bg.jpg image because is inside the media query. But this is what I get when I scroll a bit downwards:</p>
  
  <p><img src="https://i.stack.imgur.com/PGj5r.png" alt="villa-antonia seen from an iPhone 5"></p>
  
  <p>The car you see is part of the bg.jpg, the more I scroll downwards the more bg.jpg it shows in screen.</p>
  
  <p>I really don't know why is loading the image… any ideas?</p>
  
  <p>PS: The same happens in iPad and iPhone 4 (and all the other devices that can be tested at the iOS simulator).</p>