我现在使用的浏览器是Chrome版本 32.0.1664.3 m Aura,发现该版本的Chrome每次打开页面滚动页面对于position:fixed的元素会抖动,然而在重新应用position:fixed,抖动就不存在了,或者F5刷新页面后也不会抖动。

抖动的情况

我的测试代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  
<style type='text/css'>
.fixbutton{
    position: fixed;
    padding: 1em;
    border: 1px solid #C8C8C8;
    background: #FF4F4F;
    bottom: 0em;
    right: 2em;
  
}

.fixedheader{
    position: fixed;
    padding: 1em;
    background: #7E7EFF;
    top : 0;
    left : 0;
    right:  0;
}
  </style>

</head>
<body>
  <div class="fixedheader">fixed header</div>

11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>11111111<br>


<div class="fixbutton">fixed button</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  
</body>
</html>

大家先看看视频

重新设置position发现不会抖动了。

引入jQuery1.7.2不会抖动了。但是引入1.11.0发现还是会抖动

其他浏览器的情况

我的电脑上的其他浏览器(Chromium 版本 30.0.1592.0 、Firefox 27.0.1 、 IE9)无抖动问题。

寻找其他人的浏览器,Chrome 33 无此抖动问题。

因此此问题应该是部分浏览器的问题,非全部的问题。

目前可能可以解决的方法

目前可以解决的方法我也尝试了一些,只剩下几个。

第一种,给fixed的元素添加css的样式,我试过,这个可以解决此闪动的问题。

-webkit-transform: translateZ(0);

第二种,设置css。我是在不复杂的页面做的测试。

html, body {height:100%;overflow:auto;margin: 0;}

注意,引入这个CSS可能会导致原来的页面布局出现问题,慎重。我的同事也说,这个是为了解决IE6系列的fixed抖动问题。

第三种,引入jquery1.7.2的类库。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

引入jQuery的方法不知道为什么可以,但是引入了1.11.0的版本就无法解决这个问题。很奇怪。

声明:未经允许禁止转载 东东东 陈煜东的博客 文章,谢谢。如经授权,转载请注明: 转载自东东东 陈煜东的博客

本文链接地址: chrome修复css属性position fixed抖动 – https://www.chenyudong.com/archives/chrome-position-fixed-shake.html