css - 在 -webkit-translate 之后，CSS 修复了 Chrome 中的定位中断

Question

我正在创建一个基于响应式网页设计的网页。所以当它调整到更小的分辨率时，导航菜单将从顶部栏中移除，并变成 iPhone Facebook/Path 风格的移动滑动菜单。我已经使用这个库实现了它。

同时我在底部有一个固定的定位面板，可以上下拉动，停靠在页面底部。非常接近这个，只是我的在底部，可以拉起来。

这是 Chrome 中的问题：当我滑出移动菜单并滑回时（它使用“-webkit-transform: translateX()”），固定定位的面板会破坏其位置。

经过一番研究，这似乎是Chrome 中的一个错误。但是，有解决方法吗？

可能重复：使用 -webkit-transform 时固定位置不起作用（尽管我在答案中没有找到任何解决我的问题的方法）

非常感谢！

score 4 · Accepted Answer

你可以按照这个小提琴

它真的很干净和简单。您可以开始遵循相同的结构。

注意：由于某种原因，固定元素需要具有 z-index：

#topbar
    position: fixed
    z-index: 1

1 回答 1