CSS变换比例在Safari中不起作用

Question

请原谅我糟糕的格式。我试图理解为什么变换比例在 Safari 中不起作用。

我有四个酒红色和灰色交替的盒子，当我将鼠标悬停在上面时，我让它们交换颜色和放大，以便更清楚地突出显示哪个。

我一直在开发 chrome 版本。 41.0.2272.89 dev-m，我可以看到它在我测试过的其他浏览器中工作。(Firefox；即 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);
}

Answer 1

Scale为webkit-transform指定了两个参数，试试:

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