title: Webkit text flickers when using CSS transform (scale)
body: <p>This happens in Safari 6 on Mountain Lion and in the latest chrome. <strong>(Confirmed on OSX, might not happen in windows)</strong></p>
  
  <p>Please see this page for an example:</p>
  
  <p><a href="http://users.telenet.be/prullen/flicker2.html">http://users.telenet.be/prullen/flicker2.html</a></p>
  
  <p>Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing. </p>
  
  <p>The associated CSS is below. I cannot make any changes to the <code>.out</code> and <code>.in</code> classes. Only to the item class.</p>
  
  <p>I have tried adding <code>-webkit-backface-visibility:hidden;</code> as I read somewhere that that should fix it, but it hasn't made any difference.</p>
  
  <p>Does anyone have a clue? </p>
  
  <p>Thanks,
  Wesley</p>
  
  <pre><code>.out {                                      
     position:        relative;                                       
     display:        block;                                      
     margin:            0;                                      
     border:            0;
     padding:        0;                                      
     margin-left:    auto;                                       
     margin-right:    auto;                                      
     overflow:        hidden;    
   }
  .in {                                   
     position:        relative;                                       
     display:        block;                                      
     margin:            0;                           
     padding:        0;                            
     border:            0;
     overflow:        hidden;
  }
  .item {
     margin: 60px;
     -webkit-transition: -webkit-transform .15s linear;
     -moz-transition: -moz-transform .15s linear;
     -o-transition: -o-transform .15s linear;
     transition: transform .15s linear;
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -o-transform-style : preserve-3d;
     -ms-transform-style : preserve-3d;
  }
  .item:hover {
     -webkit-transform: scale(1.3) !important;
     -moz-transform: scale(1.3) !important;
     -o-transform: scale(1.3) !important;
     -ms-transform: scale(1.3) !important;
     transform: scale(1.3) !important;
  }
  </code></pre>