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.

Slipcase

Answer 1

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/

Urochrome

Doesn't work if you have a container with transformZ(); where its child has a position:fixed; – Thebaid

Answer 2

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

Propagandist

Saw, something about such bugs in iframes, during searching the solution for my one. – Slipcase