Menu
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;
}
399
Parallax scrolling increases load time For users with slower internet speeds, a parallax scrolling website will be seen as crawling. “Although many users didn't notice this themselves, I could see they were missing large portions of the content because they were scrolling too fast through the page.”
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
Parallax scrolling is a web design technique in which the website background moves at a slower pace than the foreground. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive browsing experience. Parallax is based on optical illusion.
Parallax is an effect that creates the appearance of depth and dimension by moving two elements at different rates when scrolling through a web page or slide. We've created three different types of parallax effects: Parallax, Parallax-Motion, and Parallax-Zoom.
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.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
