• home > webfront > style > css3 >

    关于css3之transform一些坑的总结-transform对普通元素的N多渲染

    Author:zhoulujun@live.cn Date:

    任何非none的transform值都会导致一个堆叠上下文(stacking context)和包含块(containing block)的创建。

    关于css3 transform一些小坑

    一、transform导致字体在动画时候变模糊    

    • GPU 硬件加速也会有坑,当我们希望使用利用类似 transform: translate3d() 这样的方式开启 GPU 硬件加速,一定要注意元素层级的关系,尽量保持让需要进行 CSS 动画的元素的 z-index 保持在页面最上方。

    • Graphics Layer 不是越多越好,每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ,并计算他们下一帧的重绘区域,所以过量的 Graphics Layer 计算也会给渲染造成性能影响。

    • 可以使用 Chrome ,用上面介绍的两个工具对自己的页面生成的 Graphics Layer 和元素层级进行观察然后进行相应修改。


    上面观察页面层级的 chrome 工具非常吃内存?好像还是一个处于实验室的功能,分析稍微大一点的页面容易直接卡死,所以要多学会使用第一种观察黄色边框的方式查看页面生成的 Graphics Layer 这种方式。

    二、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元素的限制

    在以前,overflowabsolute之间的限制规范内容大致是这样的:

    absolute绝对定位元素,如果含有overflow不为visible的父级元素,同时,该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明,则overflow对该absolute元素不起作用。

    五、transform限制absolute的100%宽度大小

    以前,我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算,没有就window. 现在需要把transform也考虑在内了。

    无论是IE9+,还是Chrome还是FireFox浏览器,所有绝对定位图片100%宽度,都是相对设置了transform的容器计算了




    到此,也推荐看下

    transform你不知道的那些事

    你所不知道的 CSS 动画技巧与细节


    转载本站文章《关于css3之transform一些坑的总结-transform对普通元素的N多渲染》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2016_0224_7640.html