CSS变换中的缩放在Safari浏览器中无效。

Question

请原谅我的糟糕格式。我正在尝试理解为什么在Safari中transform scale不起作用。

我有四个交替的红褐色和灰色方块，当鼠标悬停时，它们会互换颜色并放大，以使被突出显示的方块更加清晰。

我从chrome ver. 41.0.2272.89 dev-m进行开发，并且我可以在其他测试过的浏览器中看到它正常工作（Firefox和ie 9/10）。

我发现它在同事的Safari上有些作用，我可以看到按钮在放大，但动画非常卡顿，不幸的是我还没有机会检查他使用的版本。

/* background transition */

#block-block-7 .content .four.columns:nth-child(1) a { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(2) a { background:#696a6e;}
#block-block-7 .content .four.columns:nth-child(3) a { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(4) a { background:#696a6e;}
#block-block-7 .content .four.columns a:hover { background:#696a6e; }
#block-block-7 .content .four.columns:nth-child(2) a:hover { background:#a20055;}
#block-block-7 .content .four.columns:nth-child(4) a:hover { background:#a20055;}

/*reduces size before hover to reduce overlaps and enhance effect */

#block-block-7 .content .four.columns a, 
#block-block-7 .content .four.columns a,
#block-block-7 .content .four.columns a, 
#block-block-7 .content .four.columns a  { transform: scale(0.9);
-ms-transform: scale (0.9);
-webkit-transform:scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
}

/*expand on hover */

#block-block-7 .content .four.columns a:hover, 
#block-block-7 .content .four.columns a:hover,
#block-block-7 .content .four.columns a:hover, 
#block-block-7 .content .four.columns a:hover  { transform: scale(1.1);
-ms-transform: scale (1.1);
-webkit-transform:scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}

- shojiin

---

只写相关的代码，不要写所有的CSS选择器。 - microspino

下次我会记住的，第一次发帖。抱歉！ - shojiin

Answer 1

Scale指定了webkit-transform的两个参数，尝试使用：

-webkit-transform:scale(0.9, 0.9);

- Stephen Punwasi

---

@shojiin 很好！不确定为什么一个参数在某些版本的Safari中能够工作而其他版本则不能，但很高兴现在它可以使用了。 - Stephen Punwasi

现在不起作用。不确定他们是否在新版本中更改了什么？ - Sandip Subedi

@SandipSubedi 仍然可以工作。您有一个我们可以查看的示例吗？此链接有一些很棒的文档，可以帮助您开始转换和值。https://www.w3schools.com/cssref/css3_pr_transform.asp - Stephen Punwasi

答案很好。由于Safari支持缩放，您需要像这样添加它作为备选项：-webkit-transform:scale(0.9, 0.9); transform:scale(0.9, 0.9);它在CanIUse文档中有记录，称为Safari Technology Preview：https://caniuse.com/?search=scale - Konkret