css - Webkit 浏览器 : position:fixed element not behaving as expected

标签 css webkit position fixed

这是我拼凑的代码示例: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 元素可以简单地取消嵌套以表现出正确的行为,如下所示:

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

关于css - Webkit 浏览器 : position:fixed element not behaving as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25017748/

相关文章:

javascript - ionic 后退按钮对齐到标题的右侧

html - 加载大量图像的最佳方式

jquery - jScrollPane:Webkit中拖动jspDrag位时水平滚动条向左移动

search - gVim - 显示匹配搜索词的位置标记

php - 分页器,如何使第一页和最后一页静态并放在点之间

jquery - 悬停时显示正在加载 gif

safari - 在 Safari 中隐藏文本区域调整大小句柄

css - 为什么 SVG 在 webkit 浏览器下缩放时会变得模糊?

asp.net - Header Div位置根据Content Div编辑

html - 像表格一样定位元素,而不使用表格标签