Chrome渲染Transition时页面闪动Bug
2015-01-09 16:25
483 查看
前段时间,有同事和会员反馈使用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
ZT FROM HP:http://ued.taobao.com/blog/2012/01/06/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
问题主要集中于淘宝首页吊顶以及左侧服务栏处,鼠标移过整个页面会闪动一次,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
ZT FROM HP:http://ued.taobao.com/blog/2012/01/06/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
相关文章推荐
- Chrome渲染Transition时页面闪动Bug
- Chrome渲染Transition时页面闪动Bug
- Chrome渲染Transition时页面闪动Bug
- Chrome safari 渲染Transition时页面闪动Bug。 ipad touch翻页动画transition屏幕闪动问题
- 解决Chrome在应用transition时页面闪动的问题
- TP3.2关于渲染页面IF标签BUG
- Chrome页面渲染的GPU加速技术 - 基础:WebKit软件渲染模式
- chrome渲染hover状态tranform相邻元素抖动bug
- 谷歌浏览器(Chrome) Bug: 当返回到前一个页面时,隐藏文本框中的值不能正确恢复。
- 今天解决了一个bug,是一个页面渲染丢失页面的bug
- Chrome 和 IE9+浏览器的Ctrl+F 查找功能会影响页面渲染
- 运用webkit绘制渲染页面原理解决iscroll4闪动的问题
- chrome和Firefox浏览器渲染页面的不同
- Web页面未完全渲染:content部分未渲染,与navbar渲染效果相同(关键词:flask/bug)
- 记 移动端页面中莫名其妙的渲染BUG
- 运用webkit绘制渲染页面原因解决iscroll4闪动的问题
- Firefox BUG:页面太大的时候background-image背景图片渲染出错
- 解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
- chrome 一进入调试页面就会自动打断点
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题