css - Chrome 位置固定破坏与 3d 变换

Question

我基本上有一个固定的标题和一个使用同位素进行大量 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;