Chrome: Eğri geri döndüğünde metin bulanık: skew (-10deg) -> eğri (10deg)

Question

Sadece ebeveynleri eğmek istiyorum ve çocuk üzerinde geri çarpık.

Örnek: HTML

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

Örnek: CSS

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

Metin içeride Firefox, Safari ile ok gibi görünüyor. Ama Krom ve Opera onun bulanık biraz

ben

Firefox -webkit-backface-visibility: hidden; kullanmak için Chrome pikselleştirilmiş kutusunu azaltmak zorunda

:

Chrome:

Firefox Chrome karşılaştırması:

veya

Canlı örneği Photoshop ile uzaklaştırdınız:http://jsfiddle.net/1tpj1kka/

Herhangi bir fikir?

---

NOT !!! : web-tiki'nin cevabı problemi önlemek için başka bir yoldur. Ama eğer bu çarpıklık problemini çözmek için gerçek bir çözüm cevaplandıysa (gerçek düzeltme), cevabı kabul edeceğim.

Answer 1

2d veya 3d'den sonra webkit tarayıcılarla dönüştürülen "bulanık metin" discused many times olmuştur. Ancak sizin durumunuzda, dönüştürmeyi yalnızca sahte bir öğeye uygulayabilirsiniz, böylece metniniz eğrilme özelliğinden etkilenmez. Aşağıda yeniden işlemek için gpu zorlar gibi dönüşümler önce '(0) translateZ' ekleme

@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

:

Ayrıca İşaretlemenize tek bir etiket kullanmak alow metni ve Chrome'daki bulanıklığı kaldırır.

Bu

:

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

Bu Değil:

transform: skew(-10deg); 

Answer 3

Sen text-rendering: geometricPrecision CSS özelliğini deneyebilirsiniz. Bu, metninizi kenar yumuşatma olmaya zorlayacak ve böylece bulanıklık daha az önemli hale gelecektir.

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