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

Some suggestions:

1.) Use position: fixed to avoid any jitter, as you'll be taking the element out of the document flow. You can then position it using z-index.

2.) Cache as much as you can to ease processing time.

3.) Math.round may not be necessary, but try adding this CSS to your moving areas: -webkit-transform: translate3d(0,0,0); This will force hardware acceleration in Chrome, which may ease some of the jittering. (It looked smoother on my screen when I added this with Inspector, but it didn't get rid of the jumpiness with the scroll wheel.) Note: Don't do this on your entire document (e.g. body tag), as it might cause some issues with your current layout. (Your navigation bar didn't stick to the top of the window, for instance.)

4.) If you have any animations running as part of your parallax logic (tweening the margin into place or something along those lines), remove it - that would probably cause the jump you see.

Hope this helps. Best of luck.