web-dev-qa-db-fra.com

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

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

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

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

Qu'est-ce qu'une solution de contournement pour centrer une image dans le navigateur Web Safari?

csssafari
15
NineCattoRules

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

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

Veuillez vous reporter ci-dessous pour savoir quel navigateur prend en charge les préfixes et les préfixes à ajouter . http://caniuse.com/#feat=transforms2d

30
Muthukannan Kanniappan

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

La clé pour safari (y compris les périphériques ios) est d’ajouter les autres règles de transformation 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 un code de travail de mon:

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%);
}
9
TrackABill.com

Dans certains cas, vous devrez utiliser:

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

Parfois, fonctionne mieux avec un navigateur mobile.

0
Iggy