title: Strange looking words using webkit transform rotate in chrome
body: <p>I've trying to get some vertical text on a little test webpage after reading an article on how to do this.  In my CSS I have the following:</p>
  
  <pre><code>#navMenu li{
      list-style:none;
      float:left;
      -webkit-transform: rotate(-90deg); 
      -moz-transform: rotate(-90deg); 
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>
  
  <p>And the navMenu in my markup is:</p>
  
  <pre><code>&lt;ul id="navMenu"&gt;
    &lt;li&gt;Home&lt;/li&gt;
    &lt;li&gt;About&lt;/li&gt;
    &lt;li&gt;Contact&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works fine in FF 3.6, IE8(!) but in Chrome some of the words look distorted/fuzzy.  2 particular words that look 'odd' are: Contact and Portfolio.  Why would certain words be messed up but all others are okay?  </p>
  
  <p>I thought it was having a 'round' letter (c, o, q etc) at the end of the word so I did a little bit of testing (by no means exhaustive), I changed Portfolio to: Portfolix and Portfoliw which were okay but if I tried Portfoliq, Protfolie or Portfolit then it's distorted.</p>
  
  <p>Any ideas as to why this happens and any ways to remedy it?</p>