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

发布时间：2020-12-14 18:39:18 所属栏目：资源来源：网络整理

导读：我使用Bootstrap 3创建了一个网站.Bootstrap 3包含平面三角形作为glyphicons.但是图标是平的,所以我使用我的拉伸类拉伸它们： .stretch { display: inline-block; transform: scale(3,2); /* W3C */ -webkit-transform: scale(3,2); /* Safari and Chrome */

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

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

-webkit-transform: translateZ(0px);

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

解决方法

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

要解决此问题,您可以尝试使用font-size“缩放”glyphicon,然后使用transform：scale将其缩小.缩小比例可以给你更好的结果.

还有glyphicon-play,它已经是您想要的形状,无需变换.使用font-size进行大小调整,而不是变换：scale还是会再次遇到同样的问题.它仅作为右箭头存在.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!