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

Il semble y avoir un problème avec ma page ici: http://www.lonewulf.eu

Lorsque vous survolez 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;
}

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 est liée à transform, donc @Beskow 's a quelque chose à voir avec ça. Comme il s'agit d'un problème spécifique au kit Web, il vous suffit de spécifier la visibilité de la face arrière pour le kit Web. Il existe d'autres préfixes de fournisseur .

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

Pour une raison quelconque, Chrome interprète la position des éléments sans opacité de 1 d'une manière différente. 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.

J'ai eu le même problème, je l'ai corrigé avec la rotation de transformation css. Comme ça:

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

Cela fonctionne bien dans les principaux navigateurs.

Une autre solution qui a résolu ce problème pour moi était d'ajouter la règle:

will-change: opacity;

Dans mon cas particulier, cela a évité un problème de saut de pixels similaire à celui translateZ(0)introduit dans Internet Explorer, malgré la correction des choses dans Chrome.

La plupart des autres solutions proposées ici qui impliquent des transformations (par exemple. translateZ(0), rotate(0), translate3d(0px,0px,0px), Etc.) le travail en remettant la peinture de l'élément vers le GPU, ce qui permet un rendu plus efficace. will-changefournit un indice au navigateur qui a vraisemblablement un effet similaire (permettant au navigateur de rendre la transition plus efficace), mais se sent moins piraté (car il aborde explicitement le problème plutôt que de simplement pousser le navigateur à utiliser le GPU).

Cela dit, il convient de garder à l'esprit que la prise en charge du navigateur n'est pas aussi bonne pour will-change(bien que si le problème concerne uniquement Chrome, cela pourrait être une bonne chose!), Et dans certaines situations, cela peut entraîner des problèmes propres , mais quand même , c'est une autre solution possible à ce problème.

J'étais besoin appliquer à la fois backface-visibilityet des transformrègles pour éviter ce pépin. Comme ça:

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

J'ai eu un problème similaire avec les filtres (de non-opacité) en survol. Correction en ajoutant une règle à la classe de base avec:

filter: brightness(1.01);

backface-visibilité (ou -webkit-backface-visibilité) a uniquement résolu le problème dans Chrome pour moi. Pour corriger à la fois Firefox et 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
}

J'ai rencontré un problème similaire dans Safari 8.0.2, où les images tremblaient au fur et à mesure de la transition de leur opacité. Aucun des correctifs publiés ici n'a fonctionné, mais ce qui suit a fonctionné:

-webkit-transform: translateZ(0);

Tout le crédit à cette réponse via cette réponse ultérieure

J'ai rencontré ce problème avec des images dans une grille, chaque image était imbriquée dans un qui avait display: inline-block déclaré. La solution publiée par Jamland ci-dessus a permis de corriger le problème lorsque l'affichage: inline-block; a été déclaré sur l'élément parent.

J'avais une autre grille où les images étaient dans une liste non ordonnée et je pouvais simplement déclarer display: block; et une largeur sur l'élément de liste parent et la visibilité déclarée de la face arrière: masqué; sur l'élément d'image et il ne semble pas y avoir de décalage de position en survol.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

La solution alpipego m'a été servie dans ce problème. Utilisez -webkit-backface-visibility: hidden; Avec cela l'image aucun mouvement dans la transition d'opacité de survol

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

J'ai eu des problèmes avec toutes les autres solutions ici, car elles nécessitent des modifications du CSS qui peuvent casser d'autres choses - position: relative m'oblige à repenser complètement la façon dont je positionne mes éléments, transformer: rotate (0) peut interférer avec l'existant transforme et donne de petits effets de transition bancaux lorsque j'ai une durée de transition définie, et la visibilité de la face arrière ne fonctionnera pas si jamais j'ai réellement besoin d'une face arrière (et nécessite beaucoup de préfixes.)

La solution la plus paresseuse que j'ai trouvée est de simplement définir une opacité sur mon élément qui est très proche, mais pas tout à fait, de 1. Ce n'est un problème que si l'opacité est 1, donc cela ne va pas casser ou interférer avec l'un de mes autres styles:

opacity:0.99999999;

Après avoir marqué la réponse de Rick Giner comme correcte, j'ai alors découvert qu'elle ne résolvait pas le problème.

Dans mon cas, j'ai des images de largeur responsive contenues dans un div de largeur maximale. Une fois que la largeur du site croise cette largeur maximale, les images se déplacent en survol (en utilisant la transformation css).

Le correctif dans mon cas consistait simplement à modifier la largeur maximale à un multiple de trois, trois colonnes dans ce cas, et cela l'a parfaitement corrigé.

J'ai remarqué que vous aviez de l'opacité dans votre CSS. J'ai eu le même problème avec Chrome (l'image se déplaçant en survol) .. tout ce que j'ai fait était de désactiver l'opacité et cela a été résolu, plus d'images en mouvement.

.yourclass:hover {
  /* opacity: 0.6; */
}

Eu le même problème, mon correctif mettait la classe avant le src dans l'onglet img.