l'image se déplace au survol - problème d'opacité du chrome

Question

Il semble y avoir un problème avec ma page ici : http://metallica-gr.net/photos/photos.html

Lorsque l'on passe le curseur sur les vignettes, l'image se déplace un peu sur la droite, et cela ne se produit que sur Chrome.

Mon css :

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Answer 1

Une autre solution serait d'utiliser

-webkit-backface-visibility: hidden;

sur l'élément de survol qui a l'opacité. La visibilité de la face arrière concerne transform donc @Beskow a quelque chose à voir avec cela. Comme il s'agit d'un problème spécifique à webkit, il suffit de spécifier la visibilité de la face arrière pour webkit. Il existe d'autres préfixes des fournisseurs .

Voir http://css-tricks.com/almanac/properties/b/backface-visibility/ pour plus d'informations.

Answer 2

Pour une raison quelconque, Chrome interprète différemment la position des éléments dont l'opacité est égale à 1. Si vous appliquez l'attribut CSS position:relative à vos éléments a.img, il n'y aura plus de mouvement gauche/droite car leur opacité varie.

Answer 3

J'ai eu le même problème, je l'ai résolu avec css transform rotate. Comme ceci :

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Il fonctionne bien dans les principaux navigateurs.

Answer 4

Je devais appliquer les deux backface-visibility y transform des règles pour éviter ce problème. Comme ça :

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Answer 5

La visibilité arrière (ou -webkit-visibilité arrière) n'a réglé le problème que dans Chrome pour moi. Pour résoudre le problème à la fois dans Firefox et dans Chrome, j'ai utilisé la combinaison suivante des réponses ci-dessus.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}