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. Android Studio Gradle Build Running 特别慢的问题探讨

    本文的本本win7 64bit 6G android studio2.1 在运行程序的时候Gradle Build Running 特别慢,一个helloworld都快2min了 1.开启gradle ...

  2. mac 终端启动 jboss 停留在(Starting) 不能启动joss

    今天下载了jboss,解压后发现standalone.sh,不能够在终端中执行,于是google了一下,原来是由于jdk版本的问题导致jboss一直停在调试状态(貌似是这样说的). 需要把mac系统的 ...

  3. App开发流程之右滑返回手势功能

    iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方 ...

  4. Swift中的部分更新与旧版的区别

    1. 函数中的外部变量名取消 “#”方式,仅能用直接命名方式 错误 func swift(#str :NSString){} 正确 func swift(str str :NSString){} 2. ...

  5. Spark：利用Eclipse构建Spark集成开发环境

    前一篇文章“Apache Spark学习:将Spark部署到Hadoop 2.2.0上”介绍了如何使用Maven编译生成可直接运行在Hadoop 2.2.0上的Spark jar包,而本文则在此基础上 ...

  6. 安卓开发第一步：Android Studio安装配置

    虽然本人是JAVA开发工程师平时主要开发Web App,但因为项目需求需要开发对应的移动端.一时又找不到合适的安卓开发人员,兄弟我只好被项目经理"抓来当壮丁了".俗话说好" ...

  7. WPF学习之路（十二）控件（Range控件）

    ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...

  8. JAVA中的枚举小结

    枚举 将一组有限集合创建为一种新的类型,集合里面的值可以作为程序组件使用: 枚举基本特性 以下代码是枚举的简单使用: 使用values方法返回enum实例的数组 使用ordinal方法返回每个enum ...

  9. JAVA中获取路径

    内容来自于snannan_268 关键字: java中获取路径 JAVA中获取路径: 1.jsp中取得路径:   以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.get ...

  10. layout 布局、手风琴accordion、选项卡tabs

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...