Verschwommen text auf Chrome bei der Verwendung von CSS -webkit-transform

Ich bin mit

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

skew ein div, und dann

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

zu Schräglagenkorrektur den text-mit Kind. Die Neigung sieht hässlich und pixlated in google chrome, so dass ich mit

-webkit-backface-visibility: hidden;

machen es OK Aussehen. Jetzt die container verzerrt ist sehr schön und der innere text ist "unskewed" aber der text selbst ist unscharf und hässlich! (problem besteht nur bei chrome, wer verwendet,- webkit -)

Demo

Irgendwelche Ideen, wie man den text wieder klar?

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/Pgo8c3ZnIHhtbG5zPSJodEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    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 sieht Sie ok, um mich auf Chrome33. Welche version von Chrome benutzen Sie? Außerdem, kannst du weitere code hinzufügen, zu der Frage, die das problem veranschaulicht bitte?
  • Siehe hier: jsfiddle.net/fd2XL/1 nach dem hinzufügen -webkit-backface-visibility: hidden; Unschärfe erscheint!
  • OK, ich denke, ich kann nicht sehen, was Sie zu neigen. In meiner kleinen demo habe ich nicht brauchen backface-visibility auf die Eltern, da gab es keine offensichtliche Unschärfe. Sie können hinzufügen -webkit-backface-visibility: hidden um den text zu entfernen pixelation
  • Hier der original pixlated Neigung: jsfiddle.net/EF9pd hier ist es nach -webkit-backface-visibility: hidden;: jsfiddle.net/EF9pd/1 🙁
  • Hey, alle neuen auf dieser?
  • Ich begann zu spielen, um mit einer Lösung, aber der text war immer verschwommen. Der einzige Gedanke den ich hatte, war nur verzerren das Bild und das Ende der bar, verlassen der text allein, die funktionieren würde. Meine einzige Problem mit diesem war, die Breite korrigieren. Ich werde sehen, ob ich schreiben kann, eine demo später.
  • Danke für die Mühe, wirklich müde aus!

Schreibe einen Kommentar