title: Blurry text on Chrome when using CSS -webkit-transform
body: <p>I'm using </p>
  
  <pre><code>-webkit-transform: skew(-15deg, 0deg);
  </code></pre>
  
  <p>to skew a div, and then </p>
  
  <pre><code>-webkit-transform: skew(15deg, 0deg);
  </code></pre>
  
  <p>to <em>deskew</em> the text-containing child. The skewing looks ugly and pixlated in google chrome, so I use</p>
  
  <pre><code>-webkit-backface-visibility: hidden;
  </code></pre>
  
  <p>to make it look OK. Now the container is skewed very nice and the inside text is "unskewed" but the text itself is blurry and ugly! (problem only exists only in chrome who uses -webkit)</p>
  
  <p><a href="http://jsfiddle.net/EF9pd/1/" rel="noreferrer"><strong>Demo</strong></a></p>
  
  <p>Any ideas how to make the text clear again?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="mainBodyItemBox"&gt;
      &lt;div class="mainBodyItemImage"&gt;
          &lt;img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="mainBodyItemDecorator"&gt;&lt;/div&gt;
      &lt;div class="mainBodyItemText"&gt;PEC Zwolle v FC Groningen Tickets
          &lt;br&gt; &lt;span class="mainBodyItemType"&gt;Football&lt;/span&gt;
   &lt;span class="mainBodyItemTime"&gt;&lt;strong&gt;04 Apr 2014&lt;/strong&gt; | 21:00&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.mainBodyItemBox {
      background-color: #f5f5f5;
      display: inline-block;
      font-family: Arial;
      font-size: 12px;
      height: 80px;
      width: 365px;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #c9c9c9;
      margin-left: 25px;
      margin-top: 10px;
      transform: skew(-10deg, 0deg);
      -webkit-transform: skew(-10deg, 0deg);
      -moz-transform: skew(-10deg, 0deg);
      -o-transform: skew(-10deg, 0deg);
      -ms-transform: skew(-10deg, 0deg);
      overflow: hidden;
      -webkit-backface-visibility: hidden;
  }
  .mainBodyItemImage {
      height: 100%;
      width: 125px;
      float: left;
      overflow: hidden;
  }
  .mainBodyItemDecorator {
      float: right;
      height: 100%;
      width: 10px;
      background: rgb(30, 143, 30);
      background: url(data:image/svg+xml;
      base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 143, 30, 1)), color-stop(100%, rgba(71, 209, 21, 1)));
      background: -webkit-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
      background: -o-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
      background: -ms-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
      background: linear-gradient(to bottom, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e8f1e', endColorstr='#47d115', GradientType=0);
  }
  .mainBodyItemText {
      color: #323d50;
      font-size: 15px;
      height: 100%;
      margin-left: 125px;
      padding-left: 15px;
      padding-top: 5px;
      transform: skew(10deg, 0deg);
      -webkit-transform: skew(10deg, 0deg);
      -moz-transform: skew(10deg, 0deg);
      -o-transform: skew(10deg, 0deg);
      -ms-transform: skew(10deg, 0deg);
  }
  .mainBodyItemType {
      color: #9aa7af;
      font-size: 10px;
      margin-top: 0px;
  }
  .mainBodyItemTime {
      font-size: 12px;
      margin-top: 0px;
      position: absolute;
      bottom: 10px;
      left: 15px;
  }
  </code></pre>