用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. OutputCache 如何使用本地缓存 【转】

    注意!ASP.NET MVC 3 的一个 OutputCache 问题   在用 ASP.NET MVC 3 重写博客园网站首页时,特地留意了一下这个缓存问题,通过这篇博文分享一下. 在 ASP.NE ...

  2. sqlite 删除表中重复数据(亲测可用)

    例子:表名  Paper .通过字段PaperID查找重复数据. 1 --查询某表中重复的数据       select * from Paper group by PaperID having co ...

  3. PHP curl传 json字符串

    $ch = curl_init(); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_URL, $url); curl_seto ...

  4. QQ空间漫步者

    主要功能(QQ空间) 判断空间权限并跳过无法访问 留下足迹并可选:同时留言(可单独),赞主页(可单独),赞说说(可单独) 其他附加功能,导出QQ,导入群成员,好友,空间访客,说说评论,发表说说 送空间 ...

  5. [solr] - IKAnalyzer 扩展分词库

    在solr中加入自己的扩展分词库方法: 参考文章: http://www.cnblogs.com/dennisit/archive/2013/04/07/3005847.html 1.在solr的we ...

  6. [zz] be similar with和be similar to的区别

    http://wenda.tianya.cn/question/4cb13da080ee34c9 be similar to后边既可以加物主代词又可以加人,即:be similar to sth/sb ...

  7. Mysql 自定义HASH索引带来的巨大性能提升----[真相篇]

    推倒重来 俗话说no zuo no die why you try,这时候我又忍不住zuo了,吭哧吭哧的把解决过程发上博客,向全世界宣布,哥又搞定个难题. 剧情的发展往往是看起来主角完全掌握了局势的情 ...

  8. Zookeeper全解析——Paxos作为灵魂(转)

    原计划在介绍完ZK Client之后就着手ZK Server的介绍,但是发现ZK Server所包含的内容实在太多,并不是简简单单一篇Blog就能搞定的.于是决定从基础搞起比较好. 那么ZK Serv ...

  9. Android Gradle 多Module单独编译一个Module

    假如项目中有两个Module,app1和app2.假如我只想对app1 module进行build,则可以: gradle :App1:build build命令可以换成任意gradle命令.

  10. JavaScript 数据验证类

    JavaScript 数据验证类 /* JavaScript:验证类 author:杨波 date:20160323 1.用户名验证 2.密码验证 3.重复密码验证 4.邮箱验证 5.手机号验证 6. ...