trasformare la scala in modo strano su Safari

Question

Ho creato un sito Web utilizzando Bootstrap 3. Bootstrap 3 contiene triangoli piatti come glyphicon. Ma le icone sono a piana, in modo che si estendono usando la mia classe tratto:

.stretch { 
    display: inline-block; 
    transform: scale(3,2); /* W3C */ 
    -webkit-transform: scale(3,2); /* Safari and Chrome */ 
    -moz-transform: scale(3,2); /* Firefox */ 
    -ms-transform: scale(3,2); /* IE 9 */ 
    -o-transform: scale(3,2); /* Opera */ 
} 

funziona benissimo, ma se sto usando Safari 5 l'icona sembra strano (purtroppo non riesco a caricare un'immagine diretta).. I lati del triangolo sono offuscato:

la classe del glyphicon è:

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

Ho già provato questo nella classe corpo:

-webkit-transform: translateZ(0px); 

I spero che tu possa aiutarmi, grazie!

Answer 1

ridimensionamento sfocata è un bug in Safari: https://bugs.webkit.org/show_bug.cgi?id=27684

Per risolvere questo problema, si potrebbe provare a "scala" la glyphicon fino con font-size, e poi scalare è giù utilizzando transform:scale. Ridimensionamento dovrebbe dare un risultato migliore.

C'è anche glyphicon-play, che è già nella forma desiderata, senza bisogno di trasformarsi. Utilizzare font-size per il dimensionamento, non transform: scale o si verificherà di nuovo lo stesso problema. Tuttavia esiste solo come freccia rivolta verso destra.