A terrible lag in Chrome when using the parallax effect

Question

First of all, here is a link to my site, with a problem that I am going to describe:

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

In Firefox, IE 9, Opera, Safari, iOS, the site looks perfect and runs smoothly. The problem is with Chrome and Android devices, where scrolling incredibly lags and parallax-like background images come to life.

I suspect that the problem is related to the background size: the cover and background attachment: the fixed attributes of my images, but I still have to find a solution to this problem.

You can see it firsthand and get a better view at the link above. Please help; I am finishing this project in the last steps, and this mistake really holds 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 think your problem is with CSS, but rather in JS.

Firstly, I see that you are using nicescroll along with parallax.js. There could be two conflicts: try removing nicescroll from your JS and see if it is better.

Secondly, by analyzing the activity of your frame with the timeline of the developer tools, you can see the exact point at which frames are reduced:

When scrolling, you shoot 33 timers . You could probably debug your code a bit by canceling one callback at a time from a scroll event and checking which one is problematic.

UPDATE:

I think Robert understood this in the comments: your backgrounds are heavy. Since this is already a large and intensive processor load, I assume that the browser can hardly cope with parallax on such large elements. Try to reduce, compress and keep them at a lower quality.