变换规模在Safari上表现得很奇怪

Question

我使用Bootstrap创建了一个网站3. Bootstrap 3包含平面三角形作为glyphicons。但是图标是平的，所以我使用我的拉伸类拉伸它们：

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

我希望你能帮助我，谢谢！

Answer 1

模糊缩放是Safari中的一个错误：https://bugs.webkit.org/show_bug.cgi?id=27684

要解决此问题，您可以尝试使用font-size“缩放”<​​em> up ，然后使用{{1}将其缩小 }。缩小比例会给你带来更好的结果。

还有glyphicon-play，它已经是您想要的形状，无需转换。使用transform:scale进行尺寸调整，而不是font-size，否则您将再次遇到同样的问题。它仅作为右箭头存在。