iOS Performance Issues.

[harrynorthover]

I'm having issues with a parallax site I am building using Skrollr.

I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.

When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.

A couple of things I've tried are:

• Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
• Animate elements using –webkit transition: translate3d

One solution I've found is to roll back my Skrollr version to 0.5.14 (2013-04-04), which is using iScroll. This performs perfectly with no jumping/flickering on the iPad. The only difference I can see here is that iScroll animates using top & position:absolute where as Skrollr 0.6.x uses translate(x,y).

I've tried swapping out https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L562 to use top positioning and position absolute, but this still has the flickering issues on iPad so I am completely lost for ideas now.

[jonathanmoore]

I am running into the same issues, and at this point simply looking for a way to disable it for mobile/touch devices. Is there a way to prevent Skrollr from getting applied to the viewport?

[Prinzhorn]

so I am completely lost for ideas now.

Please add a console.log(top, _mobileOffset) to said line. Then reload the page and give it a flick to the bottom. Check the output after the movement has stopped. If the jumping is caused by a skrollr bug, the values should jump as well.

[harrynorthover]

@jonathanmoore Have you tried rolling back your Skrollr version to 0.5.14, this actually fixed the issues for me.

@Prinzhorn I've just tried that and the values seem not to be jumping. I've also tried copying the styles from what the old Skrollr did (css properties applied to body & skrollr-body) to my page using the lastest version of skrollr and there was no difference. Could it have something to do with the fact that something along the lines of -webkit-transition: 350ms is not being used in the latest version of Skrollr? This is the only difference I can see...

[Prinzhorn]

Could it have something to do with the fact that something along the lines of -webkit-transition: 350ms is not being used in the latest version of Skrollr? This is the only difference I can see...

skrollr did never use CSS transitions.

Have you tried rolling back your Skrollr version to 0.5.14, this actually fixed the issues for me.

That's not a "fix".

Could you upload two demos, one using 0.5.14 and one using 0.6.8? Maybe I can find the difference.

[harrynorthover]

I'm aware thats not a fix but at the moment its the only option. Will do, thanks for your help on this one.

[harrynorthover]

@Prinzhorn Here you go:

Skrollr 0.5.14: http://www.projects.harrynorthover.com/parallax/0.5.14/ (I've included skrollr.mobile.min.js by default)
Skrollr 0.6.8: http://www.projects.harrynorthover.com/parallax/0.6.8/

I've double checked these demo on my iPad and the 0.6.8 version has exactly the same issues as my project. The 0.5.14 as I said early runs fine on iPad. I'm about to test them on Nexus 7 Tablet.

Thanks for your help!

[Prinzhorn]

Thanks!

Good news: I can see the flicker in Chrome on Ubuntu as well, which means I can fix it. And I guess it's related to #248 which came to my mind right when I read your post on StackOverflow.

[harrynorthover]

Brilliant, thats good news. FYI I've just tested these 2 pages on a Nexus 7 tablet and I have exactly the same issues as on iOS. Also I'm not using smooth scrolling if thats relevant at all.

[Prinzhorn]

Still trying to find the reason. Here's another guess: the animation is currently only running at about 30fps. Try replacing 33 with 16 and see if it's better https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L150

[harrynorthover]

That does actually perform better now, but there is still very noticeable flickering.

[Prinzhorn]

There are some other smaller changes I made locally, which may all added some part of the flicker. But testing with my mouse in Chrome using simulated touch events is just not the same...

Since I started skrollr it bugged me that I don't have access to an iOS device. But so far nobody donated a used one, preferably an iPad because it's much more important for presenting parallax websites.

[harrynorthover]

Yeah I understand, thankfully my office have a few floating around which I can use. I'm happy to keep on testing this for you, do you reckon you've made much progress? What do you think the issue is?

[Prinzhorn]

I'll take a closer look at it tomorrow or at the weekend. I'll post a dropbox link here with which you'll be able to try my latest experiments.

[harrynorthover]

Brilliant, thanks for your help!

[harrynorthover]

Hey, did you manage to make any progress over the weekend?

[Prinzhorn]

Hey, did you manage to make any progress over the weekend?

Unfortunately no.

Alright, I did some small changes (the 60fps setTimeout which I mentioned above and some other small changes related to mobile scrolling). Try hotlinking this file for your test project https://dl.dropboxusercontent.com/u/37892603/skrollr/src/skrollr.js

I created a branch for this issue and checked it out in dropbox. If I find further improvements you can just keep using the link above for debugging.

[harrynorthover]

Hey,

I've just tested your dropbox link on my iPad and the performance is dramatically improved! There is still a slight flicker occasionally but it has improved a lot. What did you change?

This is excellent, thanks!

[Prinzhorn]

@jonathanmoore please try the dropbox link as well, thanks.

@harrynorthover

What did you change?

In addition to the setTimeout change I

• set the second parameter of setScrollTop to true when animating the scroll position (https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L892). This was possibly colliding with smooth scrolling and caused the scroll animation to be off.
• moved the mobile scrolling (https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L560) into the render function. Now it is guaranteed that the fake scrolling and the other animations are in sync. Before that, the fake scrolling could be updated without the rest (e.g. your background animation).

[andismith]

Just wanted to say that we have used this patch on another project and it has also improved our iPad performance considerably.

[Prinzhorn]

Thanks. Having feedback from two people is enough to merge this into master. I'll let you know.

[Prinzhorn]

I've merged the changes to master and called it 0.6.9.

[twickstrom]

"I've merged the changes to master and called it 0.6.9."

OK I looked through github and I can only find 0.6.21. Your drop box file is 0.6.8.

Where can we find this latest release that runs well in iOS

[Prinzhorn]

@twickstrom 0.6.21 contains this as well. See http://semver.org/ and https://github.com/Prinzhorn/skrollr/releases