html - 变换比例在 Safari 上表现得很奇怪

Question

我使用 Bootstrap 3 制作了一个网站。Bootstrap 3 包含平面三 Angular 形作为字形。但是图标是扁平的，所以我使用我的拉伸(stretch)类拉伸(stretch)它们:

.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，图标看起来很奇怪。(抱歉，我无法直接上传图像)。 三 Angular 形的边是模糊的:

字形的类是:

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

希望您能帮帮我，谢谢!

Answer 1

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

要解决此问题，您可以尝试使用 font-size 将字形向上“缩放”，然后将其向下使用 transform:scale。按比例缩小应该会给您带来更好的结果。

还有 glyphicon-play ，它已经是你想要的形状了，不需要变换。使用 font-size 来调整大小，而不是 transform: scale 否则你会再次遇到同样的问题。不过，它仅作为右向箭头存在。