Chrome渲染Transition时页面闪动Bug
最近发现,使用Chrome访问淘宝首页会出现画面闪动的现象,但是在Mac和Win下面的Chrome无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了这个问题,正好研究解决下。
问题主要集中于淘宝首页吊顶以及左侧服务栏处,鼠标移过整个页面会闪动一次,Refresh和Reopen无法重现,只有当首次打开淘宝首页才会出现这个问题。
问题定位:
第一感觉是鼠标移动时触发了某些JavaScript,导致页面重新加载了一遍从而出现闪动,但是使用Chrome控制台监测Network状态,发现页面闪动并不会额外发送请求,这就排除了JavaScript的问题。再检查下这两个地方的CSS源码:
上述两个地方都使用了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搜索相关解决方案。
问题主要集中于淘宝首页吊顶以及左侧服务栏处,鼠标移过整个页面会闪动一次,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】相关文章
2. CSS3 Transitions, Transforms和Animation使用简介与应用展
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
上一篇:Pure CSS3 Search Form
下一篇:详解CSS的滑动门技术
﹝Chrome渲染Transition时页面闪动Bug﹞相关内容
- Chrome即将取代火狐 成为第二大浏览器
- Chrome发布新扩展 实现跨平台远程控制
- Chrome浏览器市场份额升至约25% IE降至40%
- Chrome奋战在HTML5最前线
- Chrome浏览器之于网页开发的优异性能
- 网页会爆炸 Chrome浏览器HTML5性能评测
- Chrome全球用户达2亿 鼓励开发者通过HTML5开发
- 独立浏览器HTML5性能评测 Chrome再次称王
- 20款谷歌Chrome浏览器最佳插件
- Chrome18引入GPU加速 支持SVG与CSS