scrolling is choppy in chrome when background image is fixed

Question

I'm trying to create a parallax website. But then I have an issue with fixed positioning.

I have several sections , each with a background-attachment:fixed. A position:fixed menu bar on the top with an hidden element in it on top of all sections. A google map 100% with in one of the sections.

Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.

I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.

I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it ) Some pages suggested to use these two with the fixed elements :

-webkit-backface-visibility:hidden; 
-webkit-transform: translateZ(0);

I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth. If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.

Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D

I uploaded the page : http://www.FarzanMohajerani.com/test/parallax just click anywhere on the page to scroll.

I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle : http://jsfiddle.net/Farzanmc/cRqxT/5/

It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong. Thanks

Answer 1

This solved the issue for me:

-webkit-transform: translate3d(0,0,0);

Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.