title: background-attachment: fixed + background-size: cover on Ipad?
body: <p>I have some block with height 100%, and which scrolles down by single mouse wheel (I do it with mousewheel.js). In that block I have 2 other blocks with height and width 100%, and with background images which changes with fade effect. I set <code>background-size: cover</code> and <code>background-attachment: fixed</code> for this blocks. Its working fine on desktop browsers. But on IPad I have some issues:</p>
  
  <pre><code>.first-block {
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  -webkit-transition: opacity 2s ease-in;
  transition: opacity 2s ease-in;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  top: 0;
  }
  </code></pre>
  
  <ol>
  <li><p><code>fixed</code> and <code>cover</code> together dont work, images is too zoomed.. I decided to set <code>background-attachment: scroll</code> and emulate <code>background-attachment: fixed</code> with jQuery adding this code</p>
  
  <pre><code>$(window).scroll(function() {
    var scrolledY = $(window).scrollTop();
    $('.first-block').css('background-position', 'center ' + ((scrolledY)) + 'px');
  });
  </code></pre></li>
  </ol>
  
  <p>Its working fine, but on Ipad and Safari (Mac OS) its work too slow.. Its almost crash browser..</p>
  
  <p>When I change orientation of display in Ipad - background dont reconstructed for each orientation. Its display img size only first orientation.</p>
  
  <p>I have read many many similar questions here, but I cant find the better solution for me. Please see JsFiddle demos.</p>
  
  <p><a href="http://jsfiddle.net/5yday19t/" rel="nofollow">DEMO with FIXED</a></p>
  
  <p><a href="http://jsfiddle.net/5yday19t/1/" rel="nofollow">DEMO with emulating FIXED with jQuery</a></p>
  
  <p>Thanks for any help.</p>