web-dev-qa-db-fra.com

La transformation CSS3 entraîne une rotation de 1 pixel dans Chrome

J'ai un problème en chrome avec une transition de transformation par transformation css3. La transition fonctionne bien, mais juste après avoir terminé, l'élément se décale d'un pixel. L'autre chose étrange est que cela n'arrive que lorsque la page est centrée (margin:0 auto;). Le bogue est toujours présent si vous supprimez également la transition.

Vous pouvez voir ce qui se passe ici: 

http://jsfiddle.net/MfUMd/1/

HTML:

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS:

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

Mettez en commentaire la ligne margin:0 auto; pour le faire disparaître.

Quelqu'un a une idée sur la façon d'arrêter cela tout en gardant la page centrée?

J'utilise la version 24.0.1312.57 sur OSX 10.6.8

À votre santé

google-chromecss3css-transitionscss-transforms
49
DonutReply

En fait, ajoutez simplement ceci au conteneur de site qui contient tous les éléments: -webkit-backface-visibility: hidden;

Devrait le réparer!

Gino

97
Gino Sciretta

J'ai eu le même problème, je l'ai corrigé en ajoutant ce qui suit au css de la div qui utilise la transition:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

La face arrière est utilisée pour les transitions basées sur la 3D, mais si vous utilisez uniquement la 2D, vous n'avez pas besoin de choses supplémentaires.

19
james

il y a quelque chose d'inhabituel dans la relation entre la dimension corporelle et la structure de la transformation. En fait, ce n'est pas parce que le violon iframe contient l'aperçu du code.

Quoi qu'il en soit, je vais suggérer cette approche à la place:

body{
  width:100%;
  float:left;
}

.wrap {
  margin: 50px 45%;
  width: 5%;
  float: left;
}
.block {
  width:30px;
  height:30px;
  background:black;
}
.target,.block {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

Voici la mise à jour fiddle

0
wandarkaf