Blurry text on Chrome when using CSS -webkit-transform

Question

I'm using

-webkit-transform: skew(-15deg, 0deg);

to skew a div, and then

-webkit-transform: skew(15deg, 0deg);

to deskew the text-containing child. The skewing looks ugly and pixlated in google chrome, so I use

-webkit-backface-visibility: hidden;

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)

Demo

Any ideas how to make the text clear again?

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

CSS

.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;
}

Answer 1

I am not sure this will be a viable solution for fixing blurry text but I have created something that seems to avoid the problem.

The trick I use is to encapsulate all elements that require the transform: skew(-10deg, 0deg) in a container and absolutely position the container behind the text. That way, the text is not subject to any transformation and therefore does not need to be deskewed. I did try separating the text in a different way but the mere proximity to a transformed element was still resulting in blurry text.

I have created 2 demos, this one retains your original HTML and this one using something a bit cleaner and more semantic. It is the latter that I have also included the code for below.

HTML

<article>
    <section>
        <h1>PEC Zwolle v FC Groningen Tickets</h1>
        <p>Football</p>
        <time><strong>04 Apr 2014</strong> | 21:00</time>
    </section>
    <aside>
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg" /><b></b>
    </aside>
</article>

CSS

article, aside {
    font-size: 12px;
    height: 80px;
    width: 365px;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    background-color: #f5f5f5;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -webkit-backface-visibility: hidden;
}
img {
    height: 100%;
    width: 125px;
}
aside b {
    right:0;
    top:0;
    position:absolute;
    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);
}
section {
    color: #323d50;
    height: 100%;
    margin-left:140px;
}
section h1 {
    font-size:15px;
    font-weight:normal;
    margin:5px 0 0;
}
section p {
    color: #9aa7af;
    font-size: 10px;
    margin: 5px 0;
}
time {
    font-size: 12px;
}