Почему в Safari преобразование трансляции работает неправильно?

Я часто использую этот код для центрирования a div:

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

Он отлично работает на Firefox, Internet Explorer и Chrome, однако не в Safari.

Какое обходное решение для центрирования изображения в веб-браузере Safari?

Ответы

Ответ 1

Вам нужен еще один стиль с префиксом поставщика.

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

Пожалуйста, обратитесь к ниже, чтобы узнать, какой браузер поддерживает то, что и какой префикс должен быть добавлен. http://caniuse.com/#feat=transforms2d

Ответ 2

Вот что работает для меня на всех проверенных браузерах и мобильных устройствах (Chrome, IE, Firefox, Safari, iPad, iphone 5 и 6, Android).

Ключ для сафари (включая устройства ios) заключается в том, чтобы добавить другие правила css для преобразования, а не только:

transform: translateY(-50%);

Вам нужно добавить к ней эту группу правил:

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

Вот мой рабочий код:

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%);
}

Ответ 3

В некоторых случаях вам придется использовать:

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

Иногда работает лучше с мобильным браузером.