CSS3 Transform affecting other elements with chrome/safari

Question

I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.

http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.

Answer 1

The solution for me was to apply the bellow css to the parent of all affected elements.

-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);