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

92

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;
}
zefs
la source
Ne bouge pas pour moi22.0.1229.94 m
Danny
3
Il est recommandé de placer le survol sur la balise A et non sur l'image elle-même.
Diodeus - James MacFarlane
Oui .img est une classe href. Dois-je lui donner un autre nom? peut-être que maintenant il est en conflit avec <img src>? EDIT: Nvm, j'ai changé le nom de .img en .thumb et j'ai toujours ce problème. Une autre suggestion?
zefs
C'est probablement quelque chose que Fancybox fait.
Diodeus - James MacFarlane
4
l'utilisation d'une translation sur l'axe Z était la seule solution qui fonctionnait pour moi: stackoverflow.com/questions/12502234/...
Larry

Réponses:

231

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.

Alpipego
la source
C'est la bonne réponse, mais il faut dire que la backface-visibilitypropriété doit être définie sur l' imgélément. Dans mon cas, l'élément qui a l'opacité était l' aélément qui enveloppait le img, donc votre réponse n'était pas parfaite pour moi. Btw, j'ai également trouvé ce problème sur Firefox pour Mac, je suggère donc d'utiliser tous les préfixes de fournisseur.
Oliboy50
1
@ Oliboy50 Désolé, je dois faire valoir cela. Im mon cas, les éléments défectueux étaient simplement vides divavec background-image. @alpipego Merci pour la solution!
bonflash
1
Cela a fonctionné pour moi mais a rendu mes images mauvaises, pixellisées au lieu de lisses.
Kieran Hunter
1
Je ne sais pas pourquoi cela fonctionne, mais je suis tombé dessus et j'ai essayé. Cela a corrigé un bogue qui revenait sur mon site pendant des mois maintenant que je ne pouvais jamais comprendre. Je vous remercie!
Shnibble le
J'ai également dû ajouter un z-indexpour que l'effet de survol fonctionne correctement pour moi.
Jack
34

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.

Rick Giner
la source
1
Est-ce que quelqu'un sait pourquoi c'est comme ça? Ce n'est sûrement pas une chose hasLayout?
sidonaldson le
7
Eu le même problème dans Firefox à l'instant. Relative ne l'a pas résolu, mais le réglage de cela sur l'élément l'a fait - transform: translate3d(0px,0px,0px);
ConorLuddy
J'ai eu le même problème sur Safari et transform: translate3d(0px,0px,0px);
j'ai
21

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.

Beskow
la source
1
Merci pour cela. Cela l'a corrigé dans Firefox! : D
Hans Wassink
Ouais moi aussi. L'astuce de la face arrière n'a pas fonctionné pour moi (img dans a) mais celle-ci a fonctionné! Merci!
mikmikmik
C'est la seule réponse qui a fonctionné pour moi (Chrome). Merci!
Kid Diamond
14

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.

Nick F
la source
10

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;}
Jamland
la source
10

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);
Juan Casares
la source
Même problème avec une transition de filtre au survol. Cela a réglé le problème pour moi aussi.
Josh Harrison
Utilisation du filtre: luminosité (1); sur l'élément img corrigé pour moi, merci
Sai
cela a fonctionné pour moi, avait un problème de 1px lors de l'application d'un filtre en niveaux de gris sur une image en survol. Pourquoi les développeurs de navigateurs ne peuvent-ils pas résoudre toutes ces choses enfin? Pourquoi dois-je utiliser la visibilité de la face arrière et tout ça ...
Varin
Cela corrige le problème, mais l'animation de transition cesse de fonctionner
Amin
6

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
}
Andersra
la source
4

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

James Fletcher
la source
J'ai essayé toutes les autres réponses, c'était la première qui a fonctionné!
2

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; }
user2125009
la source
2

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;
Lénine Zapata
la source
2

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;
Josh de Qaribou
la source
1

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é.

Sidonaldson
la source
1
Merci pour le commentaire, j'ai également remarqué que la position relative ne fonctionne pas toujours comme solution, donc si ce problème réapparaît, j'essaierai également votre méthode.
zefs
0

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; */
}
cssninja
la source
0

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

Échoué comme
la source