css 变换比例在 safari 中不起作用 [英] css transform scale not working in safari

问题描述

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

Please excuse my terrible formatting. I'm trying to understand why transform scale isn't working in Safari.

我有四个交替的酒红色和灰色框，我让它们在悬停时交换颜色并放大，以便更清楚地突出显示哪个.

What I've got is four boxes in alternating burgandy and grey, and I have them swap colour and enlarge when hovered over to make it clearer which one is being highlighted.

我一直在从 chrome 版本开发.41.0.2272.89 dev-m，我可以看到它在我测试过的其他浏览器中工作.(Firefox；即 9/10).

I've been developing from chrome ver. 41.0.2272.89 dev-m and I can see it working in the other browsers that I've tested in. (Firefox; and ie 9/10).

我发现它在同事的 safari 上有点用，因为我可以看到按钮在放大，但动画非常断断续续，不幸的是我没有机会检查他使用的版本.

I've found it somewhat works on a colleagues' safari in that I can see the buttons enlarging but the animation is very choppy and unfortunately I haven't had the chance to check what version he is using.

/* 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);
}

推荐答案

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

Scale specifies two parameters for webkit-transform, try:

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

这篇关于css 变换比例在 safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！