这是我拼凑的代码示例: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 浏览器中的小底部间隙)。我已经注释掉所有元素的所有 transform() 属性 as directed here ,但这也没有改变结果。对于上下文,transform() 是一个 Bourbon/Sass 混合宏,它为转换值提供供应商前缀。
为什么这个元素不接受 position: fixed in Webkit while following the above workarounds 的任何想法?
最佳答案
在阅读了 Webkit 错误后,我发现了这个问题。
https://bugs.webkit.org/show_bug.cgi?id=110478
我已经注释掉了对 .fixed 但不是父元素 的过渡/变换效果。这个 webkit 错误将破坏所有后代的固定定位(不仅仅是在将转换/转换应用于该元素时)。
.fixed 元素可以简单地取消嵌套以表现出正确的行为,如下所示:
关于css - Webkit 浏览器 : position:fixed element not behaving as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25017748/