解决CSS position:fixed 抖动问题

将id为head的div固定在最顶部,所设置的CSS属性如下:

#head {
    overflow:hidden;
    *zoom:1;
    height:44px;
    background-image:url(../Img/bg.png);
    position:fixed;
    z-index:500;
    width:100%;
}

在自己手机上打开页面,向下滑动时这个div会出现短暂的向下瞬间移动之后马上跳回到最顶部,网上资料表明是position:fixed不兼容某些浏览器的缘故,解决方法有多种:

1.给这个设置了position:fixed的元素再设置一个CSS属性:-webkit-transform: translateZ(0);

2.给html, body元素设置CSS属性 {height:100%;overflow:auto;margin: 0;}

3.引入jquery1.7.2的类库,<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

4.在fiexd内设置position:absolute,如:

 <div style="position:fiexd;bottom:0px;">

     <div style="position:absolute;">

     </div>

   </div>

参考资料:

chrome修复css属性position fixed抖动

几种解决position:fixed 抖动的方法

原文地址:https://www.cnblogs.com/Arlar/p/5660368.html