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,这样不会产生放远(变小)或者放近(变大)的效果。