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

http://jsfiddle.net/fd2XL/ looks ok to me on Chrome33. Which version of Chrome are you using? Also, can you add more code to the question that demonstrates the problem please? — andyb, Mar 26 '14 at 10:56
See here: http://jsfiddle.net/fd2XL/1/ after adding -webkit-backface-visibility: hidden; the blurriness appears! — Dor Moshkovitz, Mar 27 '14 at 14:05
OK, I guess I can't see what you are skewing. In my small demo I didn't need `backface-visibility` on the parent as there was no apparent blurriness. You can add `-webkit-backface-visibility: hidden` to the text as well to remove the pixelation — andyb, Mar 27 '14 at 14:31
Here's the original pixlated skew: http://jsfiddle.net/EF9pd/ here it is after `-webkit-backface-visibility: hidden;`: http://jsfiddle.net/EF9pd/1/ :( — Dor Moshkovitz, Mar 30 '14 at 06:45
I started playing around with a solution but the text was always blurry. The only thought I had was to just skew the image and end bar, leaving the text alone, which would work. My only issue with that was getting the widths correct. I will see if I can write a demo later. — andyb, Apr 01 '14 at 14:46

score 4 · Accepted Answer · answered Apr 02 '14 at 13:12

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

score 0 · Answer 2 · answered Feb 11 '15 at 21:26

This is my simple version based on yours:

WITH AUTO WIDTH ! :)

https://jsfiddle.net/CastelMTL/x2Lhhdmj/1/

HTML:

  <article>
    <section>
        <p>Football</p>
    </section>
    <aside>
    </aside>
</article>
<article>
    <section>
        <p>Football Player</p>
    </section>
    <aside>
    </aside>
</article>

CSS: @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic);

article, aside {
    font-size: 12px;
    height: 30px;
    width:auto;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
width:100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
border-width: 4px;
border-color: red;
background-color: #f5f5f5;
border: 3px solid #04B552;
border-radius: 3px;
/* 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;
}

section {
    color: #323d50;
    height: 30px;
    margin-left:0px;
    display: block;
}
section p {
    font-family:'lato';
    font-size:15px;
    line-height:15px;
    font-weight:normal;
    margin:10px 15px;
}

time {
    font-size: 12px;
}

Blurry text on Chrome when using CSS -webkit-transform

2 Answers2

Linked