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/

fiddle 看起来不错，但是如果您从 iframe 复制“结果”html 并在 Chrome/Canary 中作为文档运行，那么您将看到问题。

如果您在 chrome://flags/ 下启用“合成渲染层边框”也会有所帮助

基本上，当您滚动并且固定标题位于 3d 图层上时，chrome 也会使其成为 3d 图层并破坏样式/布局

注意现在固定的标题是如何缩进的并变成了一个 3d 层

在 FF、IE 等中也可以正常工作。这是一个已知的错误吗？我可以做些什么来阻止这种情况发生？

Answer 1

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

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