Search code examples
google-chromecsscss-transformsbrowser-bugs

Chrome position:fixed and transformZ bug

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.

Solution

  • 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/