przekształca skalę działając dziwnie na Safari

Question

Zrobiłem stronę internetową przy użyciu Bootstrap 3. Bootstrap 3 zawiera płaskie trójkąty jako glify. Ale ikony są na płasko tak wyciągnę je za pomocą moją klasę rozciągania:

.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 */ 
} 

działa świetnie, ale jeśli używam Safari 5 ikona wygląda dziwnie (przepraszam nie mogę przesłać obraz bezpośredni).. Boki trójkąta są niewyraźne:

klasa z glyphicon jest:

.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; 
} 

Próbowałem już to w klasie ciała:

-webkit-transform: translateZ(0px); 

I mam nadzieję, że możesz mi pomóc, dzięki!

Answer 1

Rozmyty skalowanie jest to błąd w Safari: https://bugs.webkit.org/show_bug.cgi?id=27684

Aby obejść ten problem, można spróbować "skali" The glyphicon się z font-size, a następnie przeskalować go dół użyciu transform:scale. Skalowanie powinno dać lepszy rezultat.

Istnieje również glyphicon-play, który jest już w kształcie, który chcesz, bez konieczności transformacji. Użyj rozmiaru font-size do zmiany rozmiaru, a nie transform: scale, aby ponownie uruchomić ten sam problem. Istnieje jednak tylko jako strzałka skierowana w prawo.