技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> Chrome渲染Transition时页面闪动Bug

Chrome渲染Transition时页面闪动Bug

浏览:2399次  出处信息

前段时间,有同事和会员反馈使用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页面都无法重现,只有当首次打开淘宝首页才会出现,最便捷的办法就是使用FiddlerAuto Responder功能来在线调试代码,于是我尝试将CSS代理到本地并去除-webkit-transition: all .2s ease-in-out;属性,关闭浏览器后再次访问淘宝首页发现问题解决了,反向恢复属性后执行上述操作,Bug再次重现…看来我好像找到原因了,但是为什么是它?

寻找解决方案:

Google关键字“Chrome transition blink”和“Chrome transition bug”发现网上已经有很多人注意到这个问题,推测为Chrome在初始渲染CSS动画时产生的Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:

一些思考:

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

感谢:

相关链接:

建议继续学习:

  1. 用 CSS3 Transitions 实现动画    (阅读:2354)
  2. 内容loading加载后高度变化CSS3 transition体验优化    (阅读:1616)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS中的z-index属性
后一篇:user-select介绍 >>
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1