Трансформация масштаба, действующая странно на Safari

Question

Я сделал сайт, используя Bootstrap 3. Bootstrap 3 содержит плоские треугольники как глификоны. Но иконки в квартиру, так что я растянуть их, используя свой класс простирания:

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

он прекрасно работает, но если я использую Safari 5 значок выглядит странно (жаль, что я не могу загрузить изображение прямой).. Стороны треугольника являются размытыми:

класс 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; 
} 

Я уже попробовал это в классе тела:

-webkit-transform: translateZ(0px); 

I надеюсь, вы можете мне помочь, спасибо!

Answer 1

размыто масштабирование ошибка в Safari: https://bugs.webkit.org/show_bug.cgi?id=27684

Чтобы обойти эту проблему, можно попытаться «масштаб» glyphicon до с font-size, а затем масштабировать его вниз с помощью transform:scale. Масштабирование должно дать вам лучший результат.

Существует также glyphicon-play, который уже в нужной форме, без необходимости преобразования. Используйте font-size для калибровки, а не transform: scale, или вы снова столкнетесь с тем же вопросом. Тем не менее, он существует только как стрелка с правым указателем.