parallax scrolling issue - div element jerking when scrolling in webkit browsers

Question

I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there\'s a slight jump on the body text when scrolling. click here scrol

Answer 1

I see the same jittering in FireFox and Chrome (Mac). Looking at your containers, one thing that's glaring at me is the pixel position that's being calculated/used.

Chrome: 

FireFox: 

Browsers aren't going to allow content to sit at 1/2 pixel, let alone 0.3999999 of a pixel. I think it's moving it, and trying to calculate whether to round up or round down. It jitters because it's calculating with every click of your mouse wheel.

Thus, I'd try adding Math.round() to your positions so that the containers are never being left in limbo.

Take a look at the code here: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug some of the elements, and you'll see that their only fraction of a pixel is '0.5'. Most of them (the bulk) go to round number values.