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获 ...
随机推荐
- Java中Stringbuffer、Arrays、Interger、Character类的特性
1:StringBuffer(掌握) (1)用字符串做拼接,比较耗时并且也耗内存,而这种拼接操作又是比较常见的,为了解决这个问题,Java就提供了 一个字符串缓冲区类.StringBuffer供我们使 ...
- Application.Exit()结束程序,但线程还在的解决方法。
出现此情况大多原因是使用了多线程编程,或者你所调用的dll使用了多线程.我们知道,一般情况下的线程执行完指定的任务之后是会关闭了的,但是如果对于一些循环类线程,或者忘记关掉的线程时,这个时候就需要我们 ...
- js 实现继承相关
☊ [要求]:实现一个Animal类, 和一个继承它的Dog类 ☛ [实现]: function Animal(name) { this.name = name; } Animal.prototype ...
- 转 C# DataTable 和List之间相互转换的方法
一.List/IEnumerable转换到DataTable/DataView 方法一: /// <summary> /// Convert a List{T} to a DataTabl ...
- 解决ListView和ScrollView同时使用时滑动的冲突问题
ScrollView外面包裹了一个ListView,解决其滑动冲突问题: 只需自定义ListView,命名MyListView: public class MyListView extends Lis ...
- 图数据库(graph database)资料收集和解析 - daily
Motivation 图数据库中的高科技和高安全性中引用了一个关于图数据库(graph database)的应用前景的乐观估计: 预计到2017年,图数据库产业在数据库市场的份额将从2个百分点增长到2 ...
- 关于只针对ie7浏览器的css问题
如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...
- 队列的链式实现(C语言)
/* Queue.h */ #ifndef QUEUE_H_INCLUDED #define QUEUE_H_INCLUDED #include <stdio.h> #include &l ...
- jquery serialize()、serializearray()已经$.param方法
serialize: 序列表表格内容为字符串,用于 Ajax 请求.可以对整个form,也可以只针对某部分. HTML 代码: <p id="results">< ...
- Django缓存使用方法
Django缓存分为Session和Cookie:Session为放在服务器端的缓存:Cookie为放在客户端(浏览器)的缓存. Session一般用来保存登录会话:Cookie一般用来保存一些个性化 ...