8

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;
}
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
Νίκος Ρουσσουνέλος
  • 89
  • 1
  • 2
  • 9
  • Really nice skin ! But maybe it could be related to that the skin weighs in at almost 7MB with 2 backgrounds over a meg ? P.S. You have a DIV in your HEAD :-) – Robert Hoffmann Nov 01 '13 at 20:07
  • Paul Irish has a great [video up on YouTube](http://www.youtube.com/watch?v=mSK70FwUz2A) debugging a basically identical issue - might be worth a look. – Tom Davies Nov 01 '13 at 21:03
  • 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. – Gruber Nov 10 '13 at 14:57

1 Answers1

8

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:

Devtools timeline

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.

skz
  • 165
  • 10
  • 1
    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. – Νίκος Ρουσσουνέλος Nov 02 '13 at 09:20
  • @user2946214 Nice! Glad I could help. – skz Nov 02 '13 at 16:47
  • Also used underscore.js library, to throttle some events, the template runs MUCH smoother now, on all devices/configurations. – Νίκος Ρουσσουνέλος Nov 03 '13 at 15:36
  • 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. – Gruber Nov 10 '13 at 14:59
  • 1
    @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](http://www.html5rocks.com/en/tutorials/speed/parallax/) by Paul Lewis (Chrome Team, and a great guy), it has some nice advices on parallax good practices. – skz Nov 13 '13 at 00:11
  • 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! – Gruber Nov 13 '13 at 15:51
  • 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 http://stackoverflow.com/questions/7869086/poor-performance-of-chrome-using-background-size-cover – Mdev Jun 07 '14 at 03:28