css transform scale not working in safari -

please excuse terrible formatting. i'm trying understand why transform scale isn't working in safari.

what i've got 4 boxes in alternating burgandy , grey, , have them swap colour , enlarge when hovered on make clearer 1 being highlighted.

i've been developing chrome ver. 41.0.2272.89 dev-m , can see working in other browsers i've tested in. (firefox; , ie 9/10).

i've found works on colleagues' safari in can see buttons enlarging animation choppy , unfortunately haven't had chance check version using.

/* background transition */  #block-block-7 .content .four.columns:nth-child(1) { background:#a20055;} #block-block-7 .content .four.columns:nth-child(2) { background:#696a6e;} #block-block-7 .content .four.columns:nth-child(3) { background:#a20055;} #block-block-7 .content .four.columns:nth-child(4) { 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 reduce overlaps , 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  { 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 specifies 2 parameters webkit-transform, try:

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