Chrome浏览器下fixed元素抖动的解决方案

2018/02/08更新
translate3d和matrix3d的作用是强制调用GPU渲染效果，比CPU渲染的效果更好，同时也不会引起z轴位置的错位。

---

首先要说明的是，这个问题并不是在所有浏览器下存在，而且也不是在所有chrome浏览器版本中存在。就目前chrome 62.0版本中，确实存在这个问题。

这个问题的现象是，首先定义了一个fixed元素（通常拥有较高的z-index），比如顶部的navbar，然后页面中又有动画元素，其动画效果会改变z-index（变为正值）。在这个动画播放的过程中，如果navbar正好覆盖，或部分覆盖了这个元素，其z轴位置（注意不是z-index，而是z坐标轴位置）就会发生变化。
这种变化的本质是动画在播放时，覆盖在上层的fixed元素，其Z轴位置会发生变化。动画播放完毕，Z轴位置又会恢复。从页面上来看，就是发生了抖动（z轴位置变近，也就是变为正数，会让元素看起来更大）。

解决方式很简单，强制规定fixed元素的transform要有translateZ(固定值)，或者相似的属性，比如translate3d(x,y,固定值)，常用translate3d(0,0,0)，

或者matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)（注意与c相关位，即第3,7,11,15个参数为固定值）。

这种情况下，fixed元素的Z位置就不会发生动态变化。这个固定值通常为0，这样不会产生放远（变小）或者放近（变大）的效果。