一个关于fixed抖动的小bug

前言

你们都知道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)去解决，不过这样也有缺点就是耗电和发热问题。