Chrome渲染Transition时页面闪动Bug


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

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

       问题定位:

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

  1. #site-nav .menu-hd b {

  2. -webkit-transition: -webkit-transform .2s ease-in;

  3. }
  4. .product-main s {

  5. -webkit-transition: all .2s ease-in-out;

  6. }
复制代码

       上述两个地方都使用了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搜索相关解决方案。

更多 谷歌浏览器 相关资讯

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,

CSS3中的全新色彩表现方式

CSS3中的全新色彩表现方式

传统来说,大家在CSS中使用的颜色要么是16进制格式(如#990000),要么是rgb格式(如rgb(171,205,239))。CSS3带来了一些全新色彩表现和处理方法,比如使用HSL(Hue, Saturation, Light)

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真 的试了一下,经过,我懵了,我呆

CSS3中的全新色彩表现方式

CSS3中的全新色彩表现方式

传统来说,大家在CSS中使用的颜色要么是16进制格式(如#990000),要么是rgb格式(如rgb(171,205,239))。CSS3带来了一些全新色彩表现和处理方法, 比如使用HSL(Hue, Saturation, Light)

更多 transition 相关资讯

CSS3 Animation(上)

CSS3 Animation(上)

单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

CSS3制作的分页导航

今天我们主要的目的是使用CSS3等相关属性来制作分页导航效果,大家可以直击下面的效果图: 在这个效果中,其实只有两大看点: 使用CSS3的属性,制作不规则图形

CSS3 Transitions(基础)

CSS3 Transitions(基础)

Step1:Link transitions 开头,我们做一些基础的练习:当指上文字的时候,改变其颜色! 代码如下: .case1 a{ color:#333; -webkit-transition:color 500ms ease-in;}.case1 a:

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,

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

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

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云, 禁不住诱惑享

CSS Transition (CSS过渡效果)入门

CSS Transition (CSS过渡效果)入门

尽管人们期待屏幕显示技术有所改进,但CSS和HTML却只提供了少数的交互设计控制,而且还只是双向状态的而非渐进状态,如:一个链接只能是一种颜色或另一种颜色,文本域只能是一种尺寸

CSS3 transition实现超酷图片墙动画效果

CSS3 transition实现超酷图片墙动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真 的试了一下,经过,我懵了,我呆