用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