I have a header that is fixed in position and a content area with various 3d transforms using Isotope
<header style="position: fixed; top: 0; left: 0">
</header>
<div class="isotope">
// Here is where the 3d transforms occur
</div>
You can view my demo here - http://jsfiddle.net/jzT2L/3/
Although the fiddle appears fine, if you copy the 'result' html from the iframe and run it as a document in Chrome/Canary, an issue will arise.
To help visualize the problem, it's recommended to enable "Composited render layer borders" under chrome://flags/
Essentially, when you scroll and the fixed header overlaps with a 3d layer, Chrome also turns it into a 3d layer causing a disruption in the style/layout.
You may notice that the fixed header becomes indented and transformed into a 3d layer itself during scrolling.
This issue does not occur in browsers like Firefox or Internet Explorer. Is this a known bug, and what steps can I take to prevent this from happening?