Chrome渲染Transition时页面闪动Bug

CSS3教程手机阅读

   最近发现，使用Chrome访问淘宝首页会出现画面闪动的现象，但是在Mac和Win下面的Chrome无法重现这个问题，后来重装了一遍Win7下的Chrome Beta版本，终于重现了这个问题，正好研究解决下。

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

   问题定位：

   第一感觉是鼠标移动时触发了某些JavaScript，导致页面重新加载了一遍从而出现闪动，但是使用Chrome控制台监测Network状态，发现页面闪动并不会额外发送请求，这就排除了JavaScript的问题。再检查下这两个地方的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，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有2条：

   1、-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）

   2、-webkit-transform-style: preserve-3d; （设置内嵌的元素在3D空间如何呈现：保留3D）

   小结：

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

【Chrome渲染Transition时页面闪动Bug】相关文章

1. Chrome渲染Transition时页面闪动Bug

2. CSS3 Transitions, Transforms和Animation使用简介与应用展

3. Chrome浏览器扩展变新建页面为Win8风

4. Chrome移动版浏览器HTML5页面评测‎

5. 谷歌未来战略：通过HTML5整合Android和Chrome

6. HTML5云端应用大跃进：Google Android版Chrome

7. iOS及Android 4.1版Chrome发布 HTML5得到进一步发展

8. 谷歌的抉择：Android消融，Chrome领军HTML5

9. 让网站变灰的css代码(支持IE、Firefox和Chrome)

10. Chrome 11开测新增HTML5语音输入API

本文来源：https://www.51html5.com/a888.html