变换比例在 Safari 上表现得很奇怪
Posted
技术标签:
【中文标题】变换比例在 Safari 上表现得很奇怪【英文标题】:transform scale acting weird on 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 【参考方案1】:模糊缩放是 Safari 中的一个错误:https://bugs.webkit.org/show_bug.cgi?id=27684
要解决此问题,您可以尝试使用font-size
“放大”字形图标,然后使用transform:scale
缩小缩小。缩小规模应该会给您带来更好的结果。
还有glyphicon-play
,它已经是你想要的形状了,不需要改造。使用font-size
进行大小调整,而不是transform: scale
,否则您将再次遇到同样的问题。但它只作为一个右箭头存在。
【讨论】:
以上是关于变换比例在 Safari 上表现得很奇怪的主要内容,如果未能解决你的问题,请参考以下文章
没有固定大小的容器中的垂直和水平居中文本在 Firefox 中表现得很奇怪
布尔数据似乎在 vue 3 中的 vue 反应中表现得很奇怪
在类构造函数中将此指针传递给 CreateThread 在线程过程中表现得很奇怪