变换比例在 Safari 上表现得很奇怪答案

【问题标题】：transform scale acting weird on Safari变换比例在 Safari 上表现得很奇怪
【发布时间】：2015-08-09 08:33:45
【问题描述】：

我使用 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 {
  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;
}

我已经在 body 类中尝试过这个：

-webkit-transform: translateZ(0px);

希望你能帮助我，谢谢！

【问题讨论】：

“图标变平”到底是什么意思？
@JakeTaylor 三角裤的宽度太小了，这就是我缩放它们的原因。
此链接可能会帮助您解决问题github.com/twbs/bootstrap/issues/10106

标签： html css twitter-bootstrap-3 safari

【解决方案1】：

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

要解决此问题，您可以尝试使用font-size“放大”字形图标，然后使用transform:scale 缩小缩小。缩小规模应该会给您带来更好的结果。

还有glyphicon-play，它已经是你想要的形状了，不需要改造。使用font-size 进行大小调整，而不是transform: scale，否则您将再次遇到同样的问题。但它只作为一个右箭头存在。

【讨论】：