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 -)
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/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 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!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin nicht sicher, dass dies eine brauchbare Lösung für die Befestigung verschwommen text, aber ich habe etwas geschaffen, das scheint das problem zu vermeiden.
Den trick, den ich verwenden ist die Kapseln alle Elemente, die erfordern, dass
transform: skew(-10deg, 0deg)
in einem container und absolut positionieren Sie den container hinter dem text. So, der text ist nicht Gegenstand einer transformation und braucht daher nicht zu deskewed. Ich habe versucht, die Trennung der text in einer anderen Weise, aber die bloße Nähe zu einer transformierten element war noch was in verschwommenen text.Den ich erstellt habe 2 demos, this one behält Ihre ursprüngliche HTML-und this one mit etwas cleaner und mehr semantisch. Es ist der Letzte, ich habe auch den code für unten.
HTML
CSS
Dies ist meine einfache version, basierend auf Ihre:
MIT AUTO BREITE ! 🙂
https://jsfiddle.net/CastelMTL/x2Lhhdmj/1/
HTML:
CSS:
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,900 italic);