用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. 大公司的Java面试题集

    找工作要面试,有面试就有对付面试的办法.以下一些题目来自我和我朋友痛苦的面试经历,提这些问题的公司包括IBM, E*Trade, Siebel, Motorola, SUN, 以及其它大小公司. 面试 ...

  2. 团队开发——冲刺1.f

    冲刺阶段一(第六天) 1.昨天做了什么? 为解决自己电脑的问题,查找关于C#的资料,后期做准备. 2.今天准备做什么? 把最初版与交予代码书写的同学,进行整合:测试程序. 3.遇到什么困难? 第一次整 ...

  3. Turing Tree_线段树&树状数组

    Problem Description After inventing Turing Tree, 3xian always felt boring when solving problems abou ...

  4. swiper的使用

    最近要用html5制作可以一屏一屏向上滑动的页面,发现大家使用swiper插件的较多,所以试了试,发现做出来的效果还不错,喜欢的朋友可以参考一下自己动手做啦. 1.首先我们要引入4个文件: <h ...

  5. 转: SQL Server索引的维护 - 索引碎片、填充因子

    转:http://www.cnblogs.com/kissdodog/archive/2013/06/14/3135412.html 实际上,索引的维护主要包括以下两个方面: 页拆分 碎片 这两个问题 ...

  6. Nagios NSclient Failed to get CPU value: \238(_total)\6: Failed to get mutex :(

    一台Windows Server 2012的nsclient出现以下的错误,表示无法获得CPU信息 2016-08-08 10:31:33: e:..\..\..\..\trunk\modules\C ...

  7. Monte Carlo Approximations

    准备总结几篇关于 Markov Chain Monte Carlo 的笔记. 本系列笔记主要译自A Gentle Introduction to Markov Chain Monte Carlo (M ...

  8. Sprint第二个冲刺(第十天)

    一.Sprint 计划会议: 现在总结一下情况,正在做的3个功能的完成程度已经达到了80%,过几天就可以完成了.也把之前做的修改界面放入fragment中,方便修改管理.效果图如下: 二.Sprint ...

  9. VS2013添加使用lib的方法

    使用第三方厂家的库,一般都会有三个文件: xxx.h xxx.lib xxx.dll 头文件很明显,就在需要用到的文件里面include就好. lib文件,可以直接在IDE中添加,具体步骤有两个: 1 ...

  10. 关于tomcat7下websocket不能使用

    tomcat启动时提示 信息: JSR 356 WebSocket (Java WebSocket 1.0) support is not available when running on Java ...