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

时间: 2024-11-07 16:55:45

safari渲染Transition动画不流畅问题的相关文章

Chrome渲染Transition时页面闪动Bug

前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了这个问题,正好研究解决下… 问题主要集中于淘宝首页吊顶以及左侧服务栏处,鼠标移过整个页面会闪动一次,Refresh和Reopen无法重现,只有当首次打开淘宝首页才会出现… 问题重现: 如果想查看此问题请访问jsfiddler 问题定位: 我的第一感觉是鼠标移动时触发了某些JS,导致页面重新加载了一遍

css3 transition 动画基础

一.transition语法: transition:[<transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>|| <transition-property>||<transition-duration>|| <transition-timing-function>||<transi

transition动画初级介绍

Transition:(过渡转变)让瞬间改变到目标值的事情,按照我们规定的过渡方式改变到目标值. 第一点:transition适合用于哪些属性? 适合所有的元素,包括::before和::after伪元素. Ps(::before和::after伪元素是在不改变html结构的情况下,适用于样式改变,所以在js中是对::before和::after进行不了事件绑定的.) var before=document.querySelector("::before");console.log(b

Swift: 是用Custom Segue还是用Transition动画

用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A->B, B->A.跳转的时候默认的那个push来push去的效果你觉得很傻X,所以想换一个效果.比如,不那么二的fade in/out效果. 很多的例子会说写一个cusom的UIStoryboardSegue,然后在这个里面写一个UIView.animationWithDuration来实现这个效果.千

Android自定义Transition动画

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 曾经(或者现在)很多人说起Android和iOS都会拿Android的UI设计来开黑, "你看看人家iOS的设计, 再来看看Android的, 差距怎么就这么大呢?", 对于这种说辞, 可以一句话来总结一下"他们还停留在4.X之前的时代". 自从Android5.0推出Material Design设计规范后, Android在设计上早已甩那个万年不变的iOS好几十条街! 以上纯

css3 Transition动画执行时有可能会出现闪烁的bug

css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit-transform-style: preserve-3d; 需要应用在动画元素上. 第二种方法在低端android上会出现性能问题.所以推荐第一种方法

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐藏display:none:点击Reset按钮后,首先显示蓝色区域display:block,然后透明度逐渐恢复至1,代码如下: 1 var btn1 = $("#testbtn1"); 2 var btn2 = $("#testbtn2"); 3 var contai

CSS3 transition动画、transform变换、animation动画

一.CSS3 transition动画 transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性参数: 1.transition-property 设置过渡的属性,比如:width height background-color2.transition-duration 设置过渡的时间,比如:1s 500ms3.transition-timing-function 设置过渡的运动方式 linear 匀速 ease 开始和结束慢速 ease-

3D渲染和动画制作|KeyShot 9 Pro for Mac中文版下载安装

KeyShot 9 Pro for Mac是应用在Mac上的一款3D渲染和动画制作软件,keyshot是您快速创建精彩视觉效果所需的一切.在实时3D渲染工作流程显示结果即时,缩短了创建逼真的产品拍摄的时间.从科学上准确的材料和环境预设到高级材料编辑和动画,创建交互式产品视觉效果或销售和营销图像从未如此简单. 软件安装教程 下载KeyShot 9 Pro for Mac中文版 地址:https://www.macdown.com/mac/6157.html keyshot 9 镜像下载好之后,打开