Chrome位置固定断开与3d变换

Question

我基本上有一个固定的标题和一个内容区域，使用Isotope

进行大量的3d变换

<header style="position: fixed; top: 0; left: 0">
</header>

<div class="isotope">
   // 3d transforms happen here
</div>

我这里有一个小提琴 - http://jsfiddle.net/jzT2L/3/

小提琴看起来没问题，但是如果你从iframe复制'结果'html并在Chrome / Canary中作为文档运行，那么你会看到问题。

如果在chrome：// flags /

下启用“合成渲染图层边框”，也会有所帮助

基本上当你滚动并且固定标题在3d图层上时，chrome也会使它成为一个3d图层并打破样式/布局

注意固定标题现在如何缩进并成为3d图层

同样适用于FF，IE等。这是一个已知的错误，我该怎么做才能阻止这种情况发生？

Answer 1

您可以尝试在“已损坏”元素的容器中添加以下样式：

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