Texte flou sur Chrome lors de l'utilisation de CSS -webkit-transform

Je suis en utilisant

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

pour incliner un div, et puis

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

à redressement le texte contenant de l'enfant. L'inclinaison semble laid et pixlated dans google chrome, j'utilise donc

-webkit-backface-visibility: hidden;

pour le faire paraître OK. Maintenant, le conteneur est biaisée très agréable et l'intérieur du texte est "unskewed", mais le texte lui-même est flou et moche! (le problème n'existe que dans chrome qui utilise webkit)

Démo

Toutes les idées sur la façon de rendre le texte encore plus clair?

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

jsfiddle.net/fd2XL semble ok pour moi sur Chrome33. La version de Chrome utilisez-vous? Aussi, pouvez-vous ajouter plus de code à la question qui illustre le problème s'il vous plaît?
Voir ici: jsfiddle.net/fd2XL/1 après l'ajout d'-webkit-backface-visibility: hidden; le flou apparaît!
OK, je suppose que je ne peux pas voir ce que vous êtes en inclinaison. Dans ma petite démo, je n'ai pas besoin de backface-visibility sur le parent qu'il n'a pas semblé flou. Vous pouvez ajouter -webkit-backface-visibility: hidden pour le texte que pour supprimer la pixelisation
Voici l'original pixlated inclinaison: jsfiddle.net/EF9pd ici, c'est après -webkit-backface-visibility: hidden;: jsfiddle.net/EF9pd/1 🙁
Hey, tout nouveau sur ce?

OriginalL'auteur Dor Moshkovitz | 2014-03-26

Je ne suis pas sûr que cela va être une solution viable pour la fixation de texte flou, mais j'ai créé quelque chose qui me semble à éviter le problème.

L'astuce que j'utilise est d'encapsuler tous les éléments qui doivent être transform: skew(-10deg, 0deg) dans un récipient et absolument position du conteneur derrière le texte. De cette façon, le texte n'est soumis à aucune transformation et n'a donc pas besoin d'être deskewed. J'ai essayé de séparer le texte d'une manière différente, mais le simple fait de la proximité d'une transformée élément était encore ce qui brouille texte.

J'ai créé 2 démos, celui-ci conserve l'original de votre code HTML et celui-ci à l'aide de quelque chose d'un peu plus propre et plus sémantique. C'est ce dernier que j'ai inclus le code ci-dessous.

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

Incroyable, merci!

OriginalL'auteur andyb

C'est ma version simple, basé sur le vôtre:

AVEC LARGEUR AUTO ! 🙂

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,900 italique);

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

OriginalL'auteur sylvain

Vous devez vous connecter pour publier un commentaire.