关于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 理论上是不应该出现抖动的情况的。

Answer 2

https://segmentfault.com/a/11...