google chrome - CSS3 animations breaking fixed positioning when page scrolled

Question

I'm having trouble trying to figure out why chrome (which makes the fixed header completely disappear, Firefox keeps it there but lets absolutely positioned elements flow over the fixed element, I've averted the problem using opacity:.99, but I still wracks my mind how that does anything to fix it.

http://www.rickpascua.cu.cc/newsite-snazzy/index.html <--- problem page.

Answer 1

Set following CSS to the disappear element

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

The transform attribute translated3d doesn't exist. translate3d does, and should resolve fixed positioning with animated elements on the same page.