用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. Linux type命令

    用途说明 type命令用来显示指定命令的类型.一个命令的类型可以是如下几种: alias 别名 keyword 关键字,Shell保留字 function 函数,Shell函数 builtin 内建命 ...

  2. C语言之const和define

    const修饰的是只读变量,不是常量,其值在编译时不能被使用,因为编译器在编译时不知道其存储的内容.编译器通常不为普通const只读变量分配存储空间,而使将他们保存在符号表中,这使得他成为一个编译期间 ...

  3. OD调试篇8

    那么今天需要破解的呢,是这样一款软件. 程序刚刚进去会发现一个nag弹窗   说没有注册,要花20美金才能注册.只有5天的限制期限可以用了 进去之后 点击help里的关于这款软件   也显示了这是一个 ...

  4. Linux内核分析——跟踪分析Linux内核的启动过程

    万子惠 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程 实验部分 menu程序: cd LinuxKernel/ qemu -kernel linux-3.18.6/a ...

  5. Java数据结构和算法之链表

    三.链表 链结点 在链表中,每个数据项都被包含在‘点“中,一个点是某个类的对象,这个类可认叫做LINK.因为一个链表中有许多类似的链结点,所以有必要用一个不同于链表的类来表达链结点.每个LINK对象中 ...

  6. 《JavaScript模式》第3章 字面量和构造函数

    @by Ruth92(转载请注明出处) 第3章:字面量和构造函数 一.创建对象的三种方式 // 对象字面量 var car = {goes: "far"}; // 内置构造函数(反 ...

  7. 使用Object.observe 实现数据绑定

    Object.observe API概述 最近,JavaScript的MVC框架在Web开发届非常盛行.在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术.如果要实现模型与视图的分离,就必须要 ...

  8. Tomcat 安装--小白教程

    因为要进行微信公众号的开发模式,所以需要安装Tomcat Web服务器,现在就把我的安装过程写下来,希望可以帮到有需要的人~首先,我们需要下载tomcat的安装包,直接去官网就好啦,http://to ...

  9. 2015GitWebRTC编译实录14

    libvpx 尝试用脚本编译了下,发现有问题,就偃旗息鼓,改用他自己的configure了,在网上找了下,Git上有个现成的,直接用,更好些. https://github.com/brion/VPX ...

  10. Visual SVN Server启动失败0x8007042a错误

    今天在程序VisualSVNServer界面中启动服务时,报错如下:       VisualSVNServerServer service failed to start:服务已返回特定的服务器错误 ...