webkit浏览器会把所有需要动画的元素放到复合层中渲染，另外以下两种情况也会使不需要动画的元素也放到复合层中渲染，这样会导致元素动画不流畅(原则是需要的动画才让它在复合层中渲染)

1,元素有一个包含复合层的后代节点||元素有一个在复合层中渲染的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)

2,元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

当一个元素需要使用动画的时候，通常会使它的兄弟元素也在复合层中渲染，这会导致动画效果很不流畅，解决办法是提升该元素的层级z-index

CSS3硬件加速需要注意的事项的更多相关文章

  1. css3硬件加速

    你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU ...

  2. 3D硬件加速提升动画性能 与 z-index属性

    目录 1. chrome Layer borders 2. 层创建标准 3. 例子 总结 1. chrome Layer borders <WebKit技术内幕>第二章介绍了网页的结构,其 ...

  3. Minimit Anima – 硬件加速的 CSS3 动画插件

    Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...

  4. javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  5. 使用CSS3开启GPU硬件加速提升网站动画渲染性能

    遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...

  6. CSS3开启硬件加速

    { transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...

  7. GPU硬件加速原理 /转

    现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...

  8. GPU硬件加速

    现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...

  9. 被解放的GPU CSS3动画加速

    概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...

随机推荐

  1. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  2. Android 加载大图片到内存

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  3. c语言模拟实现oc引用计数

    #include<stdio.h> #include<stdlib.h> //在c中引入 引用计数机制 // 要解决的问题:  1,指向某块动态内存的指针有几个? //    ...

  4. IOS开发之Bug--关于C语言数组的容量参数

    这个错误之前没遇过,蛮奇葩的错误,只是一开始不了解,因为它折腾了许久. 先简单概括一下,以后有时间整理一下: 对应创建C语言的byte数组,我一开始使用:Byte b[PROTOCOL_CACHE_B ...

  5. WPExpress78_update 离线包

    http://115.com/lb/5lb7rnbr#Windows Phone SDK update for WP 7.8115网盘礼包码:5lb7rnbr 使用/layout下载的,相信很多朋友已 ...

  6. Eclipse界面设置与常用技巧

    建议使用的透视图--视窗组合 Window→Save perspective as 保存当前透视图设置,便于将来不小心打乱后恢复 恢复的方法:Window→reset perspective   定制 ...

  7. (视频) 《快速创建网站》 2.3 WordPress初始化和功能简介

    本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  8. yii2发送邮件教程

    作者:白狼 出处:http://www.manks.top/article/yii2_swiftMailer本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  9. 记录一些在用wcf的过程中走过的泥巴路 【第一篇】

    自从转移战场之后,比以前忙多了,博客也没能及时跟上,原本准备继续mvc系列,但是在那边技术比较陈旧还没能用得上,话说有3年没接触这玩意了,东西也 都忘了差不多了,既然再次接触,我也就继续温习温习,记录 ...

  10. Oracle 列转行函数 Listagg()

    这是最基础的用法: LISTAGG(XXX,XXX) WITHIN GROUP( ORDER BY XXX) 例: select listagg(oeid,',') within GROUP (ord ...