Question

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

然而，当我向下滚动时，Chrome中没有任何反应。在Safari中它可以工作。

我google了很多次，即使我使用

-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

如果您从transform-style: preserve-3d中移除body，从-webkit-transform: translateZ(0);移除.container则可以。请在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); */
}

Answer 2

尝试在“社交菜单”的容器中提供“transform：inherit”。我试过这个并且它为我工作，因为我在chrome中的容器元素在开发工具的计算css中添加了“transform：none”。

位置：不管是什么，固定都不用铬

2 个答案: