在做项目的时候发现header莫名抖动,刚开始打开网页没什么问题,多滑动几次触发几次网页中的交互就发现header在蜜汁抖动,寻找一个下午终于发现position:fixed 这个元凶,累到吐血,刚开始我还以为是动画效果或者过度效果对header有影响,万万没想到是这东西。
经过查阅资料,总结出以下几种方法解决:
一.给fiexd加上如下CSS样式:
-webkit-transform: translateZ(0);
二.设置body CSS
body {height:100%;overflow:auto;margin: 0;}
这种方式可能会影响到页面的整体效果,不建议使用
三.在fiexd内设置position:absolute,如下:
<div style="position:fiexd;bottom:0px;">
<div style="position:absolute;">
----
</div>
</div>
第一种最为简单快捷,其余几种没有一一验证。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。