Why is translation conversion not working correctly in Safari?

Question

I often use this code to center a div :

 .centered { position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); } 

It works fine on Firefox, Internet Explorer, and Chrome, but not on Safari.

What is the workaround for centering the image in a Safari web browser?

Answer 1

You need another style with a vendor prefix.

 .centered { position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

Please refer to below to find out which browser supports what and which prefix should be added. http://caniuse.com/#feat=transforms2d

Answer 2

Here's what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).

The key for safari (including ios devices) is to add other css rules for conversion, not just:

 transform: translateY(-50%); 

You need to add this rule group to it:

 -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); 

Here is my working code:

 img.ui-li-thumb { position: absolute; left: 1px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 

Answer 3

In some cases you will have to use:

 -webkit-transform: translate3d(-50%,-50%,0); 

Sometimes it works better with a mobile browser.