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

Answer 1

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.