Skrollr parallax not working on iOS and Android devices

Question

I am using the Skrollr 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.

On Android, the Parallax effect just doesn't work at all.

Slightly annoying as the examples I downloaded from the Skrollr website do not work on mobiles either, yet the main Skrollr website does work.

Is there anything obvious that I have missed that would prevent the site from working on mobiles?

Example URL

http://wickywills.com/testing/skrollr/simple-parallax.html

---

HTML

<div id="skrollr-body">

<div id="slide-1" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -200px;">
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
</div>

<div id="slide-2" class="slide"
    data-0-bottom-top="background-position: 0% 0px;"
    data-0-top-bottom="background-position: 0% -300px;">
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
</div>

<div id="slide-3" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -100px;"
    data-anchor-target="#slide-3">
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
</div>

</div>

<script src="scripts/jquery.skrollr.min.js"></script>

---

CSS

#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; }

JS

var s = skrollr.init();

Answer 1

Hello we are facing the same problem I think. on a couple days ago, I had the problem like you.

I've already search in stackoverflow and the skrollr github itself. and then I realize that in skrollr github said that you can't have position: fixed.

So try to change your code instead of using data-center="background-position: 0% 0px;" try change it with data-0-bottom-top="background-position: 0% 0%; change your "px" with "%". I think (I still assume it) that "px" will define as fixed position, and we don't want the fixed position.

And don't use fixed background-attachment on your css.

this is my sample project you can find it here.

I hope this answer can help. Thank you.