Geek Answers Handbook

Chrome Position: fixed transformZ bug

Take a look at this demo and Chrome , then delete:

-webkit-transform:translateZ(0px);

Fom css and browse Chrome again.

It also makes a Chrome container with min-width:100% , trimming the contents (not always).

I need -webkit-transform:translateZ(0px); to prevent strange black boxes from appearing in Chrome by causing transformX + Y to be used for too many items at once.

+8
css google-chrome css3 css-transforms
source share
2 answers

I ran into this problem. The problem is that google maps force the layout of the graphic on all of it to display DOM elements via -webkit-transform: translateZ(0);

To fix this problem, you can force the layout of the graphic on all of your fixed positioned elements by adding -webkit-transform: translateZ(0); each fixed element

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

+4
source share

I have the same problem with google map inside fixed parent container. Google Maps uses the translateZ property.

I believe this could be due to this bug, which seems to be fixed in beta: http://code.google.com/p/chromium/issues/detail?id=146894

+5
source share

More articles:


All Articles