Chrome渲染Transition时页面闪动Bug

前段时间，有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象，可是我在Mac和Win下面的Chrome都没法重现这个问题，后来重装了一遍Win7下的Chrome Beta版本，终于重现了这个问题，正好研究解决下…

问题主要集中于淘宝首页吊顶以及左侧服务栏处，鼠标移过整个页面会闪动一次，Refresh和Reopen没法重现，只有当首次打开淘宝首页才会出现…

问题重现：

若是想查看此问题请访问jsfiddler

问题定位：

个人第一感受是鼠标移动时触发了某些JS，致使页面从新加载了一遍从而出现闪动，可是使用Chrome控制台监测Network状态，发现页面闪动并不会额外发送请求，这就排除了JS的问题。再检查下这两个地方的CSS源码：

#site-nav .menu-hd b {
…
-webkit-transition: -webkit-transform .2s ease-in;
…
}

.product-main s {
…
-webkit-transition: all .2s ease-in-out;
…
}

上述两个地方都使用了CSS3的Transition属性，那是否是这个Transition致使的问题？因为Refresh和Reopen页面都没法重现，只有当首次打开淘宝首页才会出现，最便捷的办法就是使用Fiddler的Auto Responder功能来在线调试代码，因而我尝试将CSS代理到本地并去除-webkit-transition: all .2s ease-in-out;属性，关闭浏览器后再次访问淘宝首页发现问题解决了，反向恢复属性后执行上述操做，Bug再次重现…看来我好像找到缘由了，可是为何是它？

寻找解决方案：

Google关键字“Chrome transition blink”和“Chrome transition bug”发现网上已经有不少人注意到这个问题，推测为Chrome在初始渲染CSS动画时产生的Bug，虽然暂时没法考证这个问题的根本缘由，可是目前已知的解决方案有两条：

• -webkit-backface-visibility: hidden;（ 设置进行转换的元素的背面在面对用户时是否可见：隐藏）
• -webkit-transform-style: preserve-3d; （ 设置内嵌的元素在 3D 空间如何呈现：保留 3D ）

一些思考：

遇到一些很奇怪的Bug首先要快速定位，最经常使用的几种定位Bug方法无非这几种；其次要反复调试，使用Fiddler这类辅助工具每每能节约大量时间和精力；最后就是要善于描述关键问题，并提炼出关键字（最好是英文）使用Google搜索相关解决方案。

感谢：

• 热心反馈Bug的网友：@zyworkshop，@movinghorse，@笑笑
• 小马对于技术方案和知识沉淀的热心帮助！

相关连接：

• http://stackoverflow.com/questions/6332485/transformscale-causing-blinking-when-hovering
• http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
• Chrome Bugs List