使用css过渡旋转时,Chrome会闪烁黑屏

Question

过渡旋转会导致铬闪烁黑屏.它是一个Chrome bug(在Safari中运行正常)还是可以用一些聪明的CSS修复它.

div { 
  width:200px; 
  height:200px; 
  position:relative; 
  background:#ddd;
}

span { 
  display:inline-block; 
  position:absolute; 
  top:40px; 
  left:40px; 
  width:20px; 
  background:#007; 
  height:10px; 
  -webkit-transition: all .5s; 
}

div:hover > span { 
  -webkit-transform: rotate(180deg); 
}

<div>
    <span></span>
</div>

这里举例说明.

这个问题的问题在于它不会每次都出现,所以你必须将灰色方块悬停几次,你应该看到屏幕闪烁为黑色.

测试:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0

适用于:
Safari 5.1.2(6534.52.7)

所有雪豹测试

Answer 1

您可以通过强制-webkit-transform: translate3D(0, 0, 0)转换元素的父级来强制合成来解决此问题.

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }

<div>
  <span></span>
</div>

看看小提琴:http: //jsfiddle.net/UHLFF/