关于fixed 抖动问题

Question

<div class="login-modal">

    <div clas="login-overlay">灰色背景</div>

    <div class="login-modal-main">登录界面弹框</div>

</div>

.login-modal{

    /*display: none;*/

    z-index: 100;

    overflow: hidden;

    position: fixed;

    top: 0;

    bottom: 0;

    left:0;

    width: 100%;

    height: 100%;

}

.login-overlay{

    background-color: #000;

    opacity: 0.25;

    width: 100%;

    height: 100%;

}

.login-modal-main{

    width: 370px;

    margin: 0 auto;

    position: absolute;

    background-color: #fff;

    border-radius: 5px;

    transform:translate(-50%,-50%); 

    -webkit-transform:translate(-50%,-50%); 

    -moz-transform:translate(-50%,-50%); 

    -ms-transform:translate(-50%,-50%); 

    -o-transform:translate(-50%,-50%); 

    left: 50%;

    top: 35%;

}

弹出登录，界面滚动下去时，会抖动一下，感觉fixed没有固定住，怎么回事？

Answer 1

在不同的浏览器中测试看看。这很有可能是浏览器的问题。position:fixed&nbsp;理论上是不应该出现抖动的情况的。