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();

Despite the fact that background-position:fixed isn't really supported on mobile, it will definitely not work with skrollr, because skrollr-body is translated using CSS transforms. Inside elements which use CSS transform, fixed positioning doesn't work at all as per CSS spec. — Prinzhorn
– Prinzhorn, Commented Mar 15, 2014 at 11:07
@Prinzhorn - I'm aware of that, but the Skrollr website works perfectly on touch devices (with parallax) - I simply want my simplified version to work on touch-based devices also. It does not help that the examples downloaded from the Skrollr website do not work either :( — wickywills
– wickywills, Commented Mar 15, 2014 at 11:12
Look at the code of skrollr page. It doesn't use background-attachment:fixed — Prinzhorn
– Prinzhorn, Commented Mar 15, 2014 at 11:24

singgih · Accepted Answer · 2014-05-09 05:22:44Z

2

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.

answered May 9, 2014 at 5:22

singgih

666 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wickywills Over a year ago

Thanks uyea, your website example seems to almost work fine. It scrolls a bit oddly sometimes on an iPhone, but it's closer than anything I've seen so far!

Collectives™ on Stack Overflow

Skrollr parallax not working on iOS and Android devices

Example URL

HTML

CSS

JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example URL

HTML

CSS

JS

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related