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>

示例fiddle here。

这个问题的问题在于每次都不会发生这种情况所以你必须将灰色方块悬停几次，你应该会看到屏幕闪烁为黑色。

测试：
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/

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

1 个答案: