La transformation de CSS3 fait tourner 1px shift dans Chrome

J’ai un problème en chrome avec une transition de rotation css3. La transition fonctionne correctement, mais juste après la fin de l’élément se déplace d’un pixel. L’autre chose étrange est que cela ne se produit que lorsque la page est centrée ( margin:0 auto; ). Le bogue est toujours là si vous supprimez également la transition.

Vous pouvez le voir se produire ici:

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

HTML:

 
img

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

Commentez la margin:0 auto; ligne pour le faire partir.

Quelqu’un a-t-il des idées pour arrêter cela tout en maintenant la page centrée?

J’utilise la version 24.0.1312.57 sur OSX 10.6.8

À votre santé

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

Devrait le réparer!

Gino

J’ai eu le même problème, je l’ai corrigé en ajoutant ce qui suit au CSS du 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 n’utilisez que la 2D, vous n’avez pas besoin de ces éléments supplémentaires.

il y a quelque chose d’inhabituel dans la relation entre la dimension du corps et la structure de la transformation. Je ne suis pas en fait parce que l’iframe du violon contient l’aperçu du code.

Quoi qu’il en soit, je suggérerai plutôt cette approche:

 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 le violon mis à jour