[javascript]fixed抖动小bug

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

图片：321.gif

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


有抖动：

图片：777.png

正常

图片：888.png

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

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

神奇的发现问题就解决了，反正多次测试没问题了


总结：


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

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

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

666, 终于找到解决方案了