web-dev-qa-db-fra.com

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

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 légèrement 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;
}
cssimagegoogle-chromehoveropacity
89
zefs

Une autre solution serait d'utiliser 

-webkit-backface-visibility: hidden;

sur l'élément de survol qui a l'opacité. La face arrière-visibilité se rapporte à transform, donc @Beskow 'a quelque chose à voir avec cela. S'agissant d'un problème spécifique à un kit Web, il vous suffit de spécifier la visibilité arrière de ce dernier. Il existe d’autres préfixes vendeurs .

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

229
alpipego

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

33
Rick Giner

J'ai eu le même problème, je l'ai corrigé avec une transformation css en rotation . Comme ceci:

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

Cela fonctionne très bien dans les principaux navigateurs. 

21
Beskow

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

will-change: opacity;

Dans mon cas particulier, cela évitait un problème de saut de pixel similaire à celui que translateZ(0) avait introduit dans Internet Explorer, malgré les corrections apportées dans Chrome.

La plupart des autres solutions suggérées ici qui impliquent des transformations (par exemple, translateZ(0), rotate(0), translate3d(0px,0px,0px), etc.) fonctionnent en transférant la peinture de l'élément sur le GPU, ce qui permet un rendu plus efficace. will-change fournit au navigateur une indication qui a probablement un effet similaire (permettant au navigateur de rendre la transition plus efficacement), mais qui se sent moins hacky (puisqu'il traite explicitement le problème plutôt que de simplement inciter 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 Chrome uniquement, cela pourrait être une bonne chose!), Et dans certaines situations, il peut introduire ses propres problèmes , mais c’est quand même une autre solution possible à ce problème.

14
Nick F

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

filter: brightness(1.01);
10
Juan Casares

J'avais besoin d'appliquer les deux règles backface-visibility et transform pour éviter ce problème .

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

J'ai rencontré un problème similaire dans Safari 8.0.2, dans lequel les images tremblaient lorsque l'opacité était en transition. Aucun des correctifs publiés ici ne fonctionnait, mais les suivants:

-webkit-transform: translateZ(0);

Tout crédit à cette réponse via cette réponse suivante

5
James Fletcher

backface-Visibilité (ou -webkit-Backface-Visibilité) n'a résolu que le problème rencontré dans Chrome. Pour résoudre Firefox et Chrome, j'ai utilisé la combinaison suivante de 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
}
5
andersra

J'ai eu des problèmes avec toutes les autres solutions ici, car elles nécessitent des modifications du code CSS qui risquent de casser d'autres problèmes. - Position: le parent me demande de repenser complètement la façon dont je positionne mes éléments. Transformation: la rotation (0) peut interférer avec les fonctions existantes. transforme et donne de petits effets de transition insignifiants lorsque j'ai un ensemble de durée de transition, et la visibilité de face arrière ne fonctionnera pas si j'ai réellement besoin d'une face arrière (et nécessite beaucoup de préfixes.)

La solution la plus simple que j'ai trouvée consiste à définir une opacité sur mon élément qui est très proche de, mais pas tout à fait, de 1. C'est un problème si l'opacité est égale à 1, elle ne va donc pas casser ni interférer avec aucun de mes autres styles:

opacity:0.99999999;
2
Josh from Qaribou

J'ai rencontré ce problème avec des images dans une grille, chaque image étant imbriquée dans un affichage: inline-block declare. La solution affichée par Jamland ci-dessus a permis de corriger le problème lorsque l'affichage: inline-block; était déclarer 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 l'affichage: block; et une largeur sur l'élément de liste parent et une face arrière visible: hidden; sur l'élément d'image et il ne semble pas y avoir de changement de position en survol.

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

La solution alpipego m’a servi dans ce problème . Utilisez -webkit-backface-visibility: hidden; Avec ceci, l’image ne bouge pas dans la transition d’opacité au survol

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

Ayant marqué la réponse de Rick Giner comme correcte, j'ai alors découvert que cela ne réglait pas le problème.

Dans mon cas, j'ai des images en largeur responsive contenues dans un div en max-width. Une fois que la largeur du site dépasse cette largeur, les images se déplacent en survol (à l'aide de la transformation css).

La solution dans mon cas était simplement de modifier la largeur maximale en un multiple de trois, trois colonnes dans ce cas, et cela a été parfaitement corrigé.

1
sidonaldson

J'ai remarqué que vous aviez l'opacité incluse dans votre CSS. J'avais exactement le même problème avec Chrome (l'image bougeant en survol) .. tout ce que je faisais était de désactiver l'opacité et tout était résolu.

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

Avait le même problème, mon correctif mettait la classe avant le SRC dans l'onglet IMG.

0
Beached As