Pourquoi sur Safari la traduction de transformation ne fonctionne pas correctement?

J'ai souvent utiliser ce code pour centrer une div en vue:

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

Il fonctionne très bien sur Firefox, Internet Explorer et google Chrome, mais pas dans Safari.

Ce qui est une solution de contournement pour centrer une image dans le navigateur web Safari?

source d'informationauteur NineCattoRules

  1. 27

    Vous avez besoin d'un autre fournisseur préfixé style.

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

    Veuillez consulter ci-dessous pour savoir quel navigateur prend en charge ce et de ce préfixe doit être ajouté.
    http://caniuse.com/#feat=transforms2d

  2. 8

    Voici ce qui fonctionne pour moi sur tous les navigateurs testés et appareils mobiles (Chrome, IE, Firefox, Safari, iPad, iphone 5 et 6, Android).

    La clé pour safari (y compris les appareils ios) est d'ajouter les autres à transformer les règles css et pas seulement:

    transform: translateY(-50%);

    Vous devez ajouter à ce groupe de règles:

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

    Voici du code de travail de la mine:

    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. 0

    Dans certains cas, vous aurez à utiliser:

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

    Parfois fonctionne mieux avec le navigateur mobile.