Terrible lag in Chrome when using parallax effect

Question

first of all, here's a link to my website, having the issue I'm about to describe:

http://themes.roussounelosweb.gr/cassiopeia/

In Firefox, IE 9, Opera, Safari, iOS the website looks perfect, and runs smoothly. The problem lies with Chrome and Android devices, where the scrolling is incredibly laggy and the background images using a parallax effect are animating choppily.

I suspect the issue lies with background-size:cover and the background-attachment:fixed attributes of my images, but I have yet to find a solution to this issue.

You can see it firsthand and get a better idea on the link above. Please, help; I'm at the last steps finishing this project, and this bug is really holding me back.

section{

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
overflow:hidden;
}

section.section1{

background-image:url(../img/section1.jpg);
background-repeat:no-repeat;
color:#dedede;
text-shadow:1px 1px 5px rgba(0,0,0,0.8);
position:relative;
padding:20px 0px;
z-index:1;
overflow:hidden;
}

Solution

I don't believe your problem is in the CSS, but rather in the JS.

First, I can see you're using nicescroll along with parallax.js. It could be the two are conflicting -- try to remove nicescroll from your JS and check if it's any better.

Secondly, analyzing your frame activity with developers' tool timeline, you can see the exact point where the frames drop:

You're firing 33 timers when you're scrolling. You could probably try to debug a little your code, unbinding one callback at a time from the scroll event and checking which is the problematic one.

UPDATE:

I think Robert got it right in the comments: your backgrounds are heavy. Since it's already a big and CPU intensive page I guess that the browser handles with difficulty the parallax on such big elements. Try to shrink, compress and save them at lower quality.

Comments

[Νίκος Ρουσσουνέλος]

Disabled nicescroll and most of the problem went away. All these days searching the CSS and it was js that had a problem. Thank you very much for your time, much appreciated.

[skz]

@user2946214 Nice! Glad I could help.

[Νίκος Ρουσσουνέλος]

Also used underscore.js library, to throttle some events, the template runs MUCH smoother now, on all devices/configurations.

[Gruber]

The parallax performance issue on chrome is the main reason i usually don't use parallax techniques. Even if the question got successfully answered and fix this case, can someone point me to WHY this happens only con chrome browser? As the OP stated, on almost any other device/browser the site run smoothly (and btw great design, nice job!) but on chrome browser and android it just get choppy.

[skz]

@Gruber Bad performances on parallaxes are generally raised by poor code or bad decisions (too many animations/interactions in the same page?). AFAIK, every browser handles events (such as scrolling) in a different way. Without going too deep, I'm supposing Chrome just manages scrolls (and therefore parallaxes) in a different way than other browsers. I'd suggest you to read this article by Paul Lewis (Chrome Team, and a great guy), it has some nice advices on parallax good practices.

[Gruber]

Thank you for answering back and pointing me to that article, very interesting! And yes, every browser behave differently on scrolling.. pity that, in my experience, only chrome/webkit is having performance issues with stuff like this, mozilla and (incredibly) IE do perform better with techniques like this. Thank you!

[Mdev]

For anyone here who notices that this didn't solve the actual issue at all: Chrome apparently doesn't cache resized image, so there's a significant bottleneck when using background-size:cover. It works incredibly well on Firefox and IE, though. Apparently using this http://srobbin.com/jquery-plugins/backstretch/ might help fix the problem according to stackoverflow.com/questions/7869086/…