Search code examples
cssgoogle-chromecss-positionfixed

Position: fixed not working in chrome no matter what

I currently have a navigation AND a slide down Social menu in Sass which both are fixed.

Yet when I scroll down nothing happens in Chrome. In Safari it does work.

I googled many times and even when I use

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

it still doesn't work.

Here is the css code for my social menu (it has a ul and a li in it)

.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;
        }
    }
}

Here is my JSFiddle, my social menu is nested in my body. Here it works, maybe try it out for yourself in chrome?

Also, I make use of <!DOCTYPE html>

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

Solution

  • If you remove the transform-style: preserve-3d from the body and the -webkit-transform: translateZ(0); from the .container it works. Try it in your Chrome DevTools.

    I assume that these transforms are (quite rightly) affecting the position of the nav in the z axis.

    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); */
}