title: Skrollr parallax not working on iOS and Android devices
body: <p>I am using the <a href="https://github.com/Prinzhorn/skrollr/" rel="nofollow">Skrollr</a> library to construct a Parallax website, however when viewed on mobile devices, I get mixed results. On an iPhone the Parallax effect sort of works, but the positions of the images are in a completely different place to when viewed on a desktop. </p>
  
  <p>On Android, the Parallax effect just doesn't work at all.</p>
  
  <p>Slightly annoying as the examples I downloaded from the Skrollr website do not work on mobiles either, yet the main Skrollr website does work.</p>
  
  <p>Is there anything obvious that I have missed that would prevent the site from working on mobiles?</p>
  
  <h2>Example URL</h2>
  
  <p><a href="http://wickywills.com/testing/skrollr/simple-parallax.html" rel="nofollow">http://wickywills.com/testing/skrollr/simple-parallax.html</a></p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="skrollr-body"&gt;
  
  &lt;div id="slide-1" class="slide"
      data-center="background-position: 0% 0px;"
      data-top-bottom="background-position: 0% -200px;"&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
      &lt;p&gt;slide 1&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="slide-2" class="slide"
      data-0-bottom-top="background-position: 0% 0px;"
      data-0-top-bottom="background-position: 0% -300px;"&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
      &lt;p&gt;slide 2&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="slide-3" class="slide"
      data-center="background-position: 0% 0px;"
      data-top-bottom="background-position: 0% -100px;"
      data-anchor-target="#slide-3"&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
      &lt;p&gt;slide 3&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script src="scripts/jquery.skrollr.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <h2>CSS</h2>
  
  <pre><code>#slide-1 { background: url(images/bg-spinnaker.jpg) fixed center center no-repeat; }
  #slide-2 { background: url(images/bg-city.jpg) fixed right center no-repeat; }
  #slide-3 { background: url(images/bg-laptop.jpg) fixed center center no-repeat; }
  .slide { border-bottom: 5px solid #00f; min-height: 600px; }
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>var s = skrollr.init();
  </code></pre>