CSSの回転を使用しているときにクロムが黒く点滅する

Question

遷移が回転するとクロムが黒く点滅します。それはChromeのバグですか（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。

この問題の問題は、毎回発生しないため、グレーの四角形を何回かホバーする必要があり、画面が黒く点滅するはずです。 Snow Leopardの

上のすべてのテスト
サファリ5.1.2（6534.52.7）

を：上
クローム16.0.912.75
クロームカナリア18.0.1010.0

作品罰金：でテスト

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/