title: Chrome flashes black screen when using css transition rotate
body: <p>Transition rotate causes chrome to flash black screen. Is it a Chrome bug (works fine in Safari) or it can be fixed with some clever css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; span { 
    -webkit-transform: rotate(180deg); 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example <a href="http://jsfiddle.net/CMzQm/" rel="nofollow noreferrer">fiddle here</a>.</p>
  
  <p>The problem with this problem is that it doesn't occur every time so you'll have to hover the gray square several times and you should see the screen blinking in black.</p>
  
  <p>Tested in: <br />
  Chrome 16.0.912.75 <br />
  Chrome Canary 18.0.1010.0 <br /></p>
  
  <p>Works fine on: <br />
  Safari 5.1.2 (6534.52.7)</p>
  
  <p>All test on Snow Leopard</p>