用css3的transition过渡来做页面动画的时候,发现在chrome和ff流畅,在safari 不流畅;

度娘找到了淘宝UED的一个类似解决方案,动画就流畅了。

测试环境:

win7 32bit;

safari;

问题代码:

#site-nav .menu-hd b {

-webkit-transition: -webkit-transform .2s ease-in;

} .product-main s {

-webkit-transition: all .2s ease-in-out;

}

解决代码:

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

第一行代码是UED解决闪屏的,第二行代码就可以解决safari动画过渡不流畅的问题了;

UED原帖:Chrome渲染Transition时页面闪动Bug

safari渲染Transition动画不流畅问题的更多相关文章

  1. 关于transition动画下,如果有fixed元素,渲染的奇葩问题

    之前我们机票页面有生成一个低价日历,然后我们有一个需求就是滚动到那个月份,对应显示这个月,然后这个区域是fixed定位的,然后奇怪的事情发生了,就是低价日历的动画执行完后,修改页面的html却没有正常 ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. Chrome渲染Transition时页面闪动Bug

    前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了 ...

  4. CSS3的transition动画功能

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

  5. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  6. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  7. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  8. appendChild与Transition动画

    在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的 必须要让浏览器计算div的css属性后,然后再设置div的style,才会 ...

  9. 这样使用 GPU 渲染 CSS 动画(转)

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

随机推荐

  1. phpdesigner 的配置

    PHPDesigner 1.语言点击“view->language->”选择2.配置localhost点击“工具->配置->调试->本地”local服务器路径写自己的工作 ...

  2. Steganography-图片隐写术

    今天做DAM的作业,做到图片水印的时候,想起来当初小调同学把言页之庭的种子通过图片发给我.看到下面这个新闻真是觉得碉堡了!!技术宅又一次可以成功而隐晦的表白了!!哈哈哈!! http://war.16 ...

  3. cassandra CQL 3.0 怎样实现 dynamic column;

    1. cassandra有一个好的特点是列之间可以按照column key进行排序:这样当rowkey确定以后,对于同一个“行”的范围(range query)查找是很方便的:官方说法,每一个“行”( ...

  4. How to implement a custom type for NHibernate property

    http://blog.miraclespain.com/archive/2008/Mar-18.html <?xml version="1.0" encoding=&quo ...

  5. GCD的基本知识

    什么是GCD 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自 ...

  6. web.xml在Servlet3.0中的新增元素

    metadata-complete: 当属性为true时,该Web应用将不会加载注解配置的Web组件(如Servlet.Filter.Listener) 当属性为false时,将加载注解配置的Web组 ...

  7. 黑马程序员:Java编程_泛型

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 没有使用泛型时,只要是对象,不管是什么类型的对象,都可以存储进同一个集合中.使用 ...

  8. Erlang 102 Erlang并发编程

    笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-11-02 A outline 2014 ...

  9. .jre下的lib和jdk下的lib的区别

    jre是JDK的一个子集.提供一个运行环境.JDK的lib目录是给JDK用的,例如JDK下有一些工具,可能要用该目录中的文件.例如,编译器等.JRE的lib目录是为JVM,运行时候用的.包括所有的标准 ...

  10. Spring源码学习之:ClassLoader学习(3)

    ClassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoader要求这个类,然后由ClassLoader返回 这个类的class对象. 1.1 几个相关概念Clas ...