位置：固定在 chrome 中无论如何都不能工作答案

【问题标题】：Position: fixed not working in chrome no matter what位置：固定在 chrome 中无论如何都不能工作
【发布时间】：2015-11-26 10:19:50
【问题描述】：

我目前在 Sass 中有一个导航和一个向下滑动的社交菜单，两者都是固定的。

然而，当我向下滚动时，Chrome 中没有任何反应。在 Safari 中它确实有效。

我用谷歌搜索了很多次，甚至在我使用的时候

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

还是不行。

这是我的社交菜单的 css 代码（里面有一个 ul 和一个 li）

.social-menu{
    position:fixed;
    top: 0;
    bottom:0;
    width:100%;
    height:100vh;
    z-index:10000;
    -webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0, 0, 0);

    background-color:rgba(123, 123, 123, 0.86);

    .social-list{
        width:50%;
        margin:0 auto;
        .social-list-item{
            list-style-type: none;
        }
    }
}

这是我的 JSFiddle，我的社交菜单嵌套在我的身体中。在这里它可以工作，也许你自己在 chrome 中尝试一下？

另外，我使用<!DOCTYPE html>

http://jsfiddle.net/777t4twf/7/

【问题讨论】：

它看起来已修复！检查你的小提琴..！它甚至可以在我的机器上工作
在你的 CSS 中将 body margin 设置为 0
@Deepak 我知道，我提到它在我的小提琴中有效。但在我的网站上却没有:(。
@AndrewBone 我已经在我的身体上设置了 0 的边距和填充 ..
@FabianTjoeAOn 然后提供指向您网站的链接。

标签： css google-chrome css-position fixed

【解决方案1】：

尝试在您的“社交菜单”容器中提供“转换：继承”。我尝试了这个并且它对我有用，因为我在 chrome 中的容器元素在开发工具的计算 css 中添加了“transform：none”。

【讨论】：

【解决方案2】：

如果您从body 中删除transform-style: preserve-3d 并从.container 中删除-webkit-transform: translateZ(0);，它会起作用。在您的Chrome DevTools 中尝试一下。

我假设这些转换（非常正确地）影响了导航在 z 轴上的位置。

body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    /* -webkit-transform-style: preserve-3d; */
    /* transform-style: preserve-3d; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    background-color: #f1f1f1;
    /* -webkit-transform: translateZ(0); */
}

【讨论】：

哇，非常感谢，终于成功了。 Preserve 3d 是罪魁祸首！