Chrome: Text verschwommen, wenn Skew zurück: Skew (-10deg) -> Skew (10deg)

Question

Ich möchte nur die Eltern schief und schief es zurück auf das Kind.

Beispiel: HTML

<div class="parent"> <!-- skew(-10deg) --> 
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) --> 
</div> 

Beispiel: CSS

.parent { 
    transform: skew(-10deg); 
} 
.child { 
    transform: skew(10deg); 
} 

Text innen scheint ok mit Firefox, Safari. Aber nicht Chrome und Opera die ein bisschen verschwommen

Ich habe -webkit-backface-visibility: hidden; verwenden für Box in Chrome pixelig zu reduzieren

Firefox:

Chrome:

Firefox vs Chrome:

oder gezoomt von Photoshop

anschauliches Beispiel:http://jsfiddle.net/1tpj1kka/

Irgendeine Idee?

---

HINWEIS !!! : web-tikis Antwort ist eine andere Möglichkeit, das Problem zu vermeiden. Aber wenn jemand eine echte Lösung zur Lösung dieses Schräglaufproblems (echte Lösung) beantwortet, werde ich die Antwort akzeptieren.

Answer 1

Der "verschwommene Text" nach 2D- oder 3D-Transformationen mit Webkit-Browsern war discused many times. In Ihrem Fall können Sie die Transformation jedoch nur auf ein Pseudoelement anwenden, so dass Ihr Text nicht von der Eigenschaft skew beeinflusst wird.

Es wird alow Sie auch nur einen Tag in Ihrem Markup zu verwenden:

@import url(https://fonts.googleapis.com/css?family=Oswald); 
 
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;} 
 

 
.parent { 
 
    width: 300px; 
 
    overflow: hidden; 
 
    padding-left: 5%; 
 
    position:relative; 
 
} 
 

 
.parent::before { 
 
    content :''; 
 
    position:absolute; 
 
    top:0;left:0; 
 
    width:100%; height:100%; 
 
    background: rgba(90,190,230,0.9); 
 
    transform-origin:0 0; 
 
    transform:skew(-10deg); 
 
    z-index:-1; 
 
}

<div class="parent"> 
 
    Hello 
 
</div>

Answer 2

den 'translateZ (0)' vor Transformationen wie unten die gpu wieder zu machen zwingt Hinzufügen der Text und entfernt Unschärfe auf Chrome.

Dieses:

transform: translateZ(0) skew(-10deg); 

nicht dieses: kann

transform: skew(-10deg); 

Answer 3

Sie versuchen, die text-rendering: geometricPrecision CSS-Eigenschaft. Dadurch wird Ihr Text nicht geglättet und die Unschärfe weniger wichtig.

inp.onchange = function(){ 
 
    document.querySelector('.child').classList.toggle('geo'); 
 
    }

@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight:bold;font-size:50px;font-family:'Oswald',sans-serif;} 
 

 
.geo{ 
 
    text-rendering: geometricPrecision; 
 
    } 
 
.parent { 
 

 
    transform: skew(-10deg); 
 
    -webkit-backface-visibility: hidden; 
 
    width:300px;padding-left:15%;margin-left:-15%;overflow:hidden; 
 
} 
 

 
.child { 
 
    transform: skew(10deg); 
 
    width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%; 
 
}

<div class="parent"> <!-- skew(-10deg) --> 
 
    <div class="child geo">Hello</div> <!-- skew(10deg) (skew back) --> 
 
</div> 
 
<input type="checkbox" id="inp" checked="true"/> geometricPrecision