變換比例在Safari上扮演怪異

我製作了一個使用Bootstrap 3的網站.Bootstrap 3包含平面三角形作爲圖形。但是它們的圖標是平的，所以我用他們舒展我的伸展類：變換比例在Safari上扮演怪異

.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的圖標看上去怪異（抱歉，我不能上傳圖片直接）。三角形的邊長爲a模糊：

enter image description here

類的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);

我希望你能幫助我，謝謝！

來源

2015-05-27 Ferryzijl

你的意思是「圖標是否平坦」？ –

@JakeTaylor廣式菜單的寬度很小，這就是爲什麼我調整它們的原因。 – Ferryzijl

此鏈接可能會幫助您解決問題** https：//github.com/twbs/bootstrap/issues/10106** – sheshadri

模糊縮放在Safari中的錯誤：https://bugs.webkit.org/show_bug.cgi?id=27684

要解決這個問題，你可以嘗試「規模」的glyphicon 了與font-size，然後用transform:scale它的規模下來。縮小應該會給你一個更好的結果。

還有glyphicon-play，它已經在你想要的形狀，而無需轉換。使用font-size進行大小調整，而不是transform: scale，否則您將再次遇到同樣的問題。它只是作爲一個右箭頭存在。

來源

2015-05-31 11:32:21 Blaise

變換比例在Safari上扮演怪異

回答

相關問題