[Solved] CSS transform not working in Safari

[Matt Fletcher]

I am trying to move a search box widget on a WordPress page by using translate (since it be put there by default). The code below works on all of the major browsers except Safari both the desktop and mobile versions. The code is below:

input#s {

-ms-transform: translateY (85px);
-webkit-transform: translateY (85px);
-moz-transform: translateY (85px);
-o-transform: translateY (85px);
transform: translateY(85px);
z-index: 1000;
position: relative;
display: inline-block;

}

Thanks for any help.

[Paulie_D]

We’d need to see it…also clarify which version of Safari.

You might try

-webkit-transform: -webkit-translateY (85px);

Just for completeness though.

[Paulie_D]

Wait…

input#s {

-ms-transform: translateY(85px);
-webkit-transform: translateY(85px);
-moz-transform: translateY(85px);
-o-transform: translateY(85px);
transform: translateY(85px);
 z-index: 1000; 
  position: relative;
  display: inline-block;

}

Removed the spaces….

[Paulie_D]

edit: Paulie_D was much faster to recognize it :)

Actually, I spotted the same question & answer on StackOverflow and copied it here for comepleteness.

:)

[Author]

Posts