Chrome position:fixed and transformZ bug

Question

Take a look at this demo in FF and Chrome , then remove:

-webkit-transform:translateZ(0px);

Fom css, and look again in Chrome .

It also makes Chrome body container with min-width:100% , cutting content (not always).

I need -webkit-transform:translateZ(0px); to prevent strange weird black boxes in Chrome appeared cause using transformX + Y for too much elements at once.

Answer 1

I'm having the same issue with a google map inside a fixed parent container. Google maps uses the translateZ property.

I believe it may be related to this bug, which appears to have been fixed in beta builds: http://code.google.com/p/chromium/issues/detail?id=146894

Answer 2

I ran into this issue as well. The problem is that google maps forces GPU compositing on all it's mapping DOM elements via -webkit-transform: translateZ(0);

To fix this issue, you can force GPU compositing on all your fixed positioned elements by adding -webkit-transform: translateZ(0); to each fixed element

jsfiddle Demo: http://jsfiddle.net/plapier/QA7tK/