safari渲染Transition动画不流畅问题
用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动画不流畅问题的更多相关文章
- 关于transition动画下,如果有fixed元素,渲染的奇葩问题
之前我们机票页面有生成一个低价日历,然后我们有一个需求就是滚动到那个月份,对应显示这个月,然后这个区域是fixed定位的,然后奇怪的事情发生了,就是低价日历的动画执行完后,修改页面的html却没有正常 ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- Chrome渲染Transition时页面闪动Bug
前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了 ...
- CSS3的transition动画功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css3 Transition动画执行时有可能会出现闪烁的bug
css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...
- 解决transition动画与display冲突的几种方法
如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...
- Swift: 是用Custom Segue还是用Transition动画
用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...
- appendChild与Transition动画
在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的 必须要让浏览器计算div的css属性后,然后再设置div的style,才会 ...
- 这样使用 GPU 渲染 CSS 动画(转)
大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...
随机推荐
- 微信第三方 授权方账户信息 API文档错误
获取授权方的账户信息 该API用于获取授权方的公众号基本信息,包括头像.昵称.帐号类型.认证类型.微信号.原始ID和二维码图片URL. 需要特别记录授权方的帐号类型,在消息及事件推送时,对于不具备客服 ...
- C语言之共用体
最近在复习C语言,特再次记录: 有时需要将几种不同类型的变量存放到同一段内存单元中.如一个int.float.char放在同一个地址开始的内存单元中.,也就是使用覆盖技术,几个变量相互覆盖,称之为共用 ...
- 收到远程通知,怎么区分是点击通知栏提醒进去的还是在foreground收到的通知?
我现在是要区分点击通知栏的通知进入应用还是点击应用图标进入的,1,开始程序都是在后台.2,接受通知都是在foreground状态.applicationdidFinishLaunchWithOptio ...
- 从零开始学习Node.js例子五 服务器监听
httpsnifferInvoke.js var http = require('http'); var sniffer = require('./httpsniffer'); var server ...
- Day19_IO第一天
1.异常 1.概念 程序出现不正常的情况 2.异常体系(掌握) Throwable |-Error ...
- JDK各版本新特性!
1.JDK1.5 新特性 1.自动装箱与拆箱:自动装箱的过程:每当需要一种类型的对象时,这种基本类型就自动地封装到与它相同类型的包装中.自动拆箱的过程:每当需要一个值时,被装箱对象中的值就被自动地提取 ...
- Filco minila 的蛋疼。
3494左shift坏了,期间邮寄厂家维修,就把尘封多年的minila拿出来用着. 最为人诟病的问题:蓝亚适配,与mac跟iphone都能快速的匹配连接上.但是对于我的dell vestro 2012 ...
- XPath注入笔记
XPath注入 XQuery注入 测试语句:'or '1'='1 利用工具: Xcat介绍 Xcat是python的命令行程序利用Xpath的注入漏洞在Web应用中检索XML文档 下载地址:https ...
- Struts2 Action中的方法命名不要以get开头
偶然发现,在调用一个action中的某个方法时,会自动调用另一个无关的方法,找了好久,最后发现是方法命名的问题,方法命名以get开头,action会自动调用!所以,以后再写action中的方法时尽量不 ...
- 认识CPU Cache
http://geek.csdn.net/news/detail/114619 7个示例科普CPU Cache:http://coolshell.cn/articles/10249.html Linu ...