一个关于fixed抖动的小bug

6,550 阅读2分钟

前言

大家都知道position: fixed用于生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

突然发现自己之前写的网页有个小bug:在购买页面的结算按钮部分,有个交互就是正常是基于标准文档static里流布局在购物车下方,当网页监听滚轮位于上一部分,会固定定位fixed出现在用户浏览器下方;因为按钮有一个hover动效,就会出现概率性抖动,如下图:

详细说明

多次测试,发现抖动是概率性出现;第一直觉认为是Chrome浏览器问题,然后测试不同的版本,也换过其他浏览器,发现都有问题出现;之后我把所有的盒子设置背景颜色,发现一个问题:眼中的实际盒子模型会高于鼠标所指的盒子模型区域一点点:

有抖动

正常盒模型

这就知道了具体问题了,就是这多顶出的大约1px的像素,静态看似乎没问题,但一旦加上一些动效,就会有抖动,体验很差。但因为是概率性问题,突然不知道如何去解决?

问题解决

尝试过可能是代码冲突,于是删改了相关代码,也不行!突然想起以前看过一篇讲如何优化动画性能的文章,里面说过一个解决抖动的方案,于是尝试的加上了:

-webkit-transform: translateZ(0);
transform: translateZ(0);

反复的测试,bug就真的解决了。

总结

一般关于css3动画性能优化有2个:

  • 尽量使用 transform 当成动画熟悉,避免直接使用 height,width,margin,padding 等;
  • 建议开启浏览器 GPU 硬件加速

所以,我们使用tanslateZ(0)变成3d效果,开启了浏览器 GPU 硬件加速,提高浏览器渲染的性能;上面这个因fixed定位页面元素重排重绘时盒模型bug可能是网页渲染导致的,所以类似的bug或者抖动可以尝试tanslateZ(0)去解决,不过这样也有缺点就是耗电和发热问题。