Question

以下是我抛出的代码示例：http://codepen.io/Nuwen/pen/LHubs

.fixed div应该在滚动时淡入/淡出，由jQuery控制。这在Firefox中正常运行，但不适用于Chrome或其他webkit浏览器。

根据其他帖子的建议，我已将以下属性添加到.fixed但这还没有解决问题：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

使用相同的错误修复处理另一个元素：＃cd-lateral-nav，它的行为或多或少符合预期（除了Webkit浏览器中的小底差）。我已经注释掉了所有元素as directed here中的所有transform（）属性，但这也没有改变结果。对于上下文，transform（）是Bourbon / Sass mixin，它为转换值提供供应商前缀。

为什么这个元素不接受位置的任何想法：在遵循上述解决方法的同时在Webkit中修复了？

Answer 1

在阅读了Webkit漏洞之后，我发现了这个问题。

https://bugs.webkit.org/show_bug.cgi?id=110478

我在.fixed 而非父元素上注释了转换/转换效果。这个webkit错误将破坏所有后代的固定定位（不仅仅是当转换/转换应用于该元素时）。

.fixed元素可以简单地取消嵌套以显示正确的行为，如下所示：

http://sandbox.leighjohnson.me/brag-sheet/

Answer 2

我尝试在你的codepen链接中编辑CSS，删除试验和错误的东西，我想我终于找到导致问题的那一行。在.cd-main-content类中，删除以下行：

-webkit-transform: translateZ(0);

供将来参考：正如您所发现的那样，上述行通常用于修复元素以修复某些Chrome错误（例如，当您拥有负z-index的全屏视频背景时，一个我不久前发现的错误）。我不认为有必要把它放在父元素上。

Webkit浏览器：position：fixed元素不按预期运行

2 个答案: