Il testo ruotato in Css è jaggy

Question

Qualche idea su come ottenere il testo ruotato in css per renderlo correttamente in Chrome? In Firefox sembra accettabile.

Rimuovere l'ombra non risolve il problema e ho anche provato a regolare l'origine della transizione senza fortuna.

Su schermi ad alta risoluzione sembra anche bene.

.discount-trap { 
 
    border-bottom: 33px solid #74c331; 
 
    border-left: 33px solid transparent; 
 
    border-right: 33px solid transparent; 
 
    height: 0px; 
 
    width: 150px; 
 
    -webkit-transform: rotate(-315deg); 
 
    -moz-transform: rotate(-315deg); 
 
    -ms-transform: rotate(-315deg); 
 
    -o-transform: rotate(-315deg); 
 
    transform: rotate(-315deg); 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 25px; 
 
    color: white; 
 
    text-shadow: 0px 1px 2px black; 
 
} 
 
.discount-trap__header { 
 
    font-size: 14px; 
 
    margin-top: 2px; 
 
} 
 
.discount-trap__text { 
 
    font-size: 10px; 
 
}

<div style="position: relative;"> 
 
    <div class="discount-trap" style="display: block;"> 
 
    <div class="discount-trap__header">Save 15%</div> 
 
    <div class="discount-trap__text">Stay in Jul/Aug</div> 
 
    </div> 
 
</div>

Fiddle

Aggiornamento:

Sembra più opzioni funziona, nessuno di loro rendono liscia come Firefox, ma che è propriamente un problema di Chrome. Opzione 1: Aggiungi a .discount-trap -webkit-backface-visibility: hidden;

Opzione 2: Aggiungi a -webkit-transform: ruotare (-315deg); quindi diventa -webkit-transform: ruota (-315deg) translate3d (0, 0, 0);

Answer 1

Chrome non abilita l'anti-aliasing per impostazione predefinita. Ma è possibile aggiungere questa proprietà CSS per gli elementi al fine di consentire che:

-webkit-backface-visibility: hidden; 

Fiddle

Answer 2

ti manca un trasformare origine -webkit-transform-origin: 50% 50%;

aggiungere che, per .discount-trap

Poi hanno pasticciare con la larghezza di .discount-trap

Su dell'effetto larghezza del browser Webkit trasformata di rendering per qualche motivo così a de -bluralo e allinei la tua lettera che dovrai manipolare finché non renderà il modo in cui desideri.

Imposta anche un'altezza di riga per interrompere il numero & della tua lettera dal ballare in giro.

ad es. line-height:1;

Answer 3

si aggiungono proprietà translate3d, renderà testo senza sfocatura ...

.discount-trap { 
 
border-bottom: 33px solid #74c331; 
 
    border-left: 33px solid transparent; 
 
    border-right: 33px solid transparent; 
 
    height: 0px; 
 
    width: 150px; 
 
    -webkit-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    -moz-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    -ms-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    -o-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 25px; 
 
    color: white; 
 
    text-shadow: 0px 1px 2px black; 
 
}