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