3D fixed chrome fixed gap position

Question

I basically have a fixed title and content area with lots of 3D transformations using Isotope

<header style="position: fixed; top: 0; left: 0"> </header> <div class="isotope"> // 3d transforms happen here </div> 

I have a fiddle here - http://jsfiddle.net/jzT2L/3/

The violin looks fine, but if you copy the html "result" from the iframe and start as a document in Chrome / Canary, you will see this problem.

It also helps if you enable the "Complex borders of the rendering layer" in chrome: // flags /

Basically, when you scroll and the fixed title is above the 3D layer, chrome also makes it a three-dimensional layer and breaks the style / layout

Note that the fixed header is now fanned out and has become a three-dimensional layer

The same thing works fine in FF, IE, etc. Is this a known bug and what can I do to stop it?

Answer 1

You can try to add the following style to the container of "broken" elements:

 -webkit-backface-visibility: hidden; -webkit-perspective: 1000;