title: Skrollr, Safari, fixed position lags
body: <p>I'm playing with parallax at the moment and have an issue:</p>
  
  <p>Here's the markup</p>
  
  <pre><code>&lt;div class="welcome"&gt;&lt;/div&gt;
  &lt;div class="welcome2" data-0="top: 100%;" data-1000="top: 0%;"&gt;&lt;/div&gt;
  &lt;div class="weclome_text"&gt;
      &lt;h3 data-0="color: rgb(82,98,130);" data-1000="color: rgb(255,255,255);"&gt;Hello World&lt;/h3&gt;
      &lt;div class="scroll-button" data-0="opacity: 1;" data-300="opacity: 0;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>html,body { margin: 0; padding: 0; font-family: Sans-serif; }
  
  body {
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
  }
  
  .welcome { position: fixed; top: 0; width: 100%; height: 100%; background: url(http://justdade.com/t/bg1.png) no-repeat; background-size: cover; }
  .welcome2 { position: fixed; top: 100%; width: 100%; height: 100%; background: url(http://justdade.com/t/bg2.png) no-repeat; background-size: cover; }
  
  .weclome_text {
      position: fixed; position: fixed; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; width: 120px; height: 120px; color: #526282;
      text-align: center;
  }
  .scroll-button { background: url(http://justdade.com/t/scroll-button.png); width: 60px; height: 60px; cursor: pointer; margin: 0 auto; }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/NQ2UL/" rel="nofollow">JSFiddle</a></p>
  
  <p>Everything seems okay in all browsers expect Safari (Desktop, iOS also okay)</p>
  
  <p>Safari scroll animation is lagging pretty hard after I press "scroll" arrow.
  I also noticed that scroll lags starts only if I use position: fixed;</p>
  
  <p>Maybe someone can give me any clue where I should dig?</p>
  
  <p>Thank you.</p>