位置：固定不工作在 chrome 无论如何

Question

我目前在 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/

Answer 1

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

中尝试

我假设这些变换（非常正确地）影响了 nav 在 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); */
}

Answer 2

尝试在 "social-menu" 的容器中提供 "transform: inherit"。我尝试了这个，它对我有用，因为我在 chrome 中的容器元素在开发工具的计算 css 中添加了 "transform: none"。

位置：固定不工作在 chrome 无论如何

Position: fixed not working in chrome no matter what

css

google-chrome

fixed

css-position