01月11, 2012

win7+chromium16因transition而导致的页面闪动

近一个月,在使用360极速浏览器 打开新标签页 ,载入360导航,当鼠标滑动一会儿后会突然发现页面有刷新迹象。这种现象约是在上月360极速版内核升级至chrome16后出现得。在忙碌完去年12月的360导航种种变化后,进入2012年的今天,终于有心思去找找这个诡异的问题了。(我本机环境是win7+360极速chromium16 其他环境未跟测)

我试图重现了这种状况,发现每次用全新的标签打开导航后,鼠标滑过顶部的皮肤选择区时,立刻会出现页面闪动。F12打开开发人员工具,在NETWORK选项卡中并未发现“刷新”带来的页面请求,可见这样的闪动不是“刷新”。这样的页面闪动像是在对页面重绘。一开始我以为是特定事件导致得,后来发现在鼠标滑过笑话前的刷新按钮时,也会出现这种现象。经过剥离DEMO测试,可以断定,是由以下css代码造成得。

-webkit-transition:all .2s ease-in;

本能的将“chrome transition”作为关键字去问度娘,立刻找到了淘宝UED最近的文章:

《Chrome渲染Transition时页面闪动Bug》

粗看了一眼,发现遇见的是同样的问题。在360前端群中吼了一声,屈屈说最近有啊的rank也有遇见,并写了如下一文。

《webkit里会出现突然闪一下的问题》

由此两篇文章可以看到大家发现问题的思路及解决方案:

方案一:

-webkit-backface-visibility: hidden;
//不适用于background
//适用于"淘宝"及"有啊"中border形成的小箭头 可见适合元素属性的图形化

(设置进行转换的元素的背面在面对用户时是否可见:隐藏)

方案二:

-webkit-transform:translate3d(0,0,0);
//或
-webkit-transform-style: preserve-3d;
//这两个方式达成了同样的目的 就是指定旗下所有嵌套元素以3D方式进行渲染

(设置内嵌的元素在 3D 空间如何呈现:保留 3D )

关于backface的理解rank已经做了足够的demo页。但是结论“在用position:absulote+zindex!=0时用transform会偶尔出现页面会闪的现象,确实是chrome的一个bug。” 是不完全准确得,我的demo页在chromium16中只要使用transition就复现这种BUG。





Hao360_demo




我对transform-type的设定及transformation Functions相互影响的原理及更多细节还不甚清楚,这里仅给出W3C规范的解释:

http://www.w3.org/TR/css3-3d-transforms/#transform-functions

方案一 经测试不适用于对background设定的图形或背景色

方案二 风险在于其元素下所有嵌套的元素都会做3D渲染,会影响文本和其他元素样式定义。

对于导航而言 目前的形式还是用方案二合适。至于可能遇见问题的你,请自行判定。

毕竟这是chromium的一个BUG,在未来的版本应该会修复。

BUG已有同学提:http://code.google.com/p/chromium/issues/detail?id=108025

希望尽快改善吧。此一役,我发现有时间该去深挖掘跟进transform和transition的背后了。至少。。我可以跟进 transform的坐标系定义了

本文链接:https://75team.com/post/win7chromium16因transition而导致的页面闪动.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。