8

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.

Luis
  • 5,786
  • 8
  • 43
  • 62
Rantiev
  • 2,121
  • 2
  • 32
  • 56

2 Answers2

5

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

Stefan
  • 81
  • 5
4

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/

Phil L.
  • 389
  • 2
  • 7
  • Doesn't work if you have a container with transformZ(); where its child has a position:fixed; – kernel Oct 15 '14 at 14:15