关于css3之transform一些坑的总结－transform对普通元素的N多渲染
Author：[email protected] Date：
关于css3 transform一些小坑
css3，一般我吗会用transform中的3D属性进行GPU加速，但是，transform却有众多的坑。比如集成picker等，如果不再body下生产，那么postion:fixed，因为transform而失效。几近无解。所以，建议采用perspective transform加速。
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
理由可以参看：https://div.io/topic/1348，不再赘述。当然，transform的坑远不止这些。
一、transform导致字体在动画时候变模糊
在div进行css3动画时（translate,scale）容易发生字体变模糊再恢复的情况
transform变换会在浏览器上单独创建一个绘画层并重新进行渲染(如果元素应用了关于transform的transition或者animation，那么在状态变化过程中，元素会在GPU中渲染，会出现图片/文字的模糊。)，由于图层渲染的时候也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。
关于css硬件加速方面坑总结：
GPU 硬件加速也会有坑，当我们希望使用利用类似 transform: translate3d() 这样的方式开启 GPU 硬件加速，一定要注意元素层级的关系，尽量保持让需要进行 CSS 动画的元素的 z-index 保持在页面最上方。
Graphics Layer 不是越多越好，每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ，并计算他们下一帧的重绘区域，所以过量的 Graphics Layer 计算也会给渲染造成性能影响。
可以使用 Chrome ，用上面介绍的两个工具对自己的页面生成的 Graphics Layer 和元素层级进行观察然后进行相应修改。
上面观察页面层级的 chrome 工具非常吃内存？好像还是一个处于实验室的功能，分析稍微大一点的页面容易直接卡死，所以要多学会使用第一种观察黄色边框的方式查看页面生成的 Graphics Layer 这种方式。
下面是张鑫旭在这方面的总结：http://www.zhangxinxu.com/wordpress/?p=4799,本人做了删节，当然最好还是去逛下张总博客。
二、transform提升元素的垂直地位
我们可能都知道这样一个规则，当遭遇元素margin负值重叠的时候，如果没有static以外的position属性值的话，后面的元素是会覆盖前面的元素的。
dmeo：CSS3 transform覆盖后面的重叠元素Demo
只要是支持transform元素的浏览器，包括IE9(-ms-), 都会提高普通元素的垂直地位，使其覆盖其他元素而不是被覆盖。
这种特性底层原理是层叠上下文，具体可参见 深入理解CSS中的层叠上下文和层叠顺序
三、transform限制position:fixed的跟随效果
我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。
四、transform改变overflow对absolute元素的限制
在以前，overflow与absolute之间的限制规范内容大致是这样的：
absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。
五、transform限制absolute的100%宽度大小
以前，我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算，没有就window. 现在需要把transform也考虑在内了。
无论是IE9+，还是Chrome还是FireFox浏览器，所有绝对定位图片100%宽度，都是相对设置了transform的容器计算了
到此，也推荐看下
转载本站文章《关于css3之transform一些坑的总结－transform对普通元素的N多渲染》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2016_0224_7640.html