l'image se déplace sur le vol stationnaire - chrome opacité problème

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

Lorsque vous passez la souris sur les vignettes de l'image bouge un peu sur la droite, et il 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;
}

Ne bouge pas pour moi sur 22.0.1229.94 m
Il est recommandé de placer le hover sur Un tag, et non l'image elle-même.
Oui .img est un href classe. Dois-je lui donner un nom différent? peut-être que maintenant il est en conflit avec <img src> ? EDIT: Nvm, j'ai changé le nom de .img .pouce et toujours avoir ce problème. Toute autre suggestion?
C'est probablement quelque chose Fancybox est en train de faire.
Je ne vois pas les vignettes de passer placez - Chrome v. 22. Non, une classe appelée img ne seront pas en conflit avec img éléments: l'un est sélectionné avec img {..} l'autre avec .img {...}. Votre site m'a fait rire 😉
Bizarre, en utilisant les dernières Chrome et ils se déplacent sur la mienne. Il vous a fait rire, est-ce bon ou mauvais? Premier site que j'ai téléchargé sur le web.
à l'aide d'une translation sur l'axe des Z est la seule solution qui a fonctionné pour moi: stackoverflow.com/questions/12502234/...

InformationsquelleAutor zefs | 2012-10-19

230

Une autre solution serait d'utiliser
```
-webkit-backface-visibility: hidden;
```
sur le hover élément qui a de l'opacité.
Le Backface-visibilité concerne transform, donc @Beskow's a obtenu quelque chose à faire avec elle. Depuis, c'est un webkit problème spécifique, vous avez seulement besoin de spécifier le backface-visibilité pour webkit. Il y a d'autres fournisseur de préfixes.

Voir http://css-tricks.com/almanac/properties/b/backface-visibility/ pour plus d'info.
- C'est la bonne réponse, mais vous avez à dire que le backface-visibility propriété doit être définie sur la img élément. Dans mon cas, l'élément qui a l'opacité a été le a élément qui enroulez le img, de sorte que votre réponse n'a pas été parfait pour moi. Btw, j'ai également constaté ce problème sur Firefox pour Mac, je vous conseille d'utiliser tous les fournisseurs de préfixes.
- Désolé, j'ai à faire valoir que. Im mon cas, les éléments défaillants étaient de simples vide divs avec background-image. @alpipego Merci pour la solution!
- Cela a fonctionné pour moi, mais en fait mes images, l'air mauvais, pixélisées au lieu de lisse.
- Je ne sais pas pourquoi cela fonctionne, mais je suis tombé sur ce et a donné un coup de feu. Cette correction d'un bug qui a cessé de venir sur mon site depuis maintenant des mois que je ne pourrais jamais comprendre. Merci!!!!
- J'ai également eu à ajouter un z-index pour obtenir l'effet hover fonctionne correctement pour moi.
InformationsquelleAutor alpipego
33

Pour quelque raison Chrome interprète la position des éléments sans une opacité de 1 d'une manière différente. Si vous appliquez l'attribut CSS position:relative à votre une.les éléments img, il y aura plus de mouvement de gauche à droite comme à leur opacité varie.
- Personne ne sait pourquoi il en est? Ce n'est sûrement pas un hasLayout chose?
- Eu le même problème dans Firefox, il suffit maintenant. Relative n'ont pas le fixer, mais le réglage de ce paramètre sur l'élément n'a - transform: translate3d(0px,0px,0px);
- J'ai eu le même problème sur Safari et transform: translate3d(0px,0px,0px); travaillé
InformationsquelleAutor Rick Giner
21

J'ai eu le même problème, je l'ai réparé avec du css transformer tourner.
Comme ceci:
```
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
```
Il fonctionne très bien dans les principaux navigateurs.
- Merci pour cette. Ce fixe dans Firefox! 😀
- Yep moi aussi. Le backface astuce ne fonctionne pas pour moi (img à l'intérieur d'un), mais elle a! Merci!
- C'est la seule solution qui a fonctionné pour moi (Chrome). Merci!
InformationsquelleAutor Beskow
14

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, ce qui permettrait d'éviter un semblable pixel-saut question que translateZ(0) introduit dans Internet Explorer, en dépit de fixer les choses dans google 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) travail par la remise en peinture de l'élément sur le GPU, ce qui permet rendu plus efficace. will-change fournit une indication sur le navigateur, qui a sans doute un effet similaire (permettant au navigateur de rendre la transition plus efficace), mais se sent moins hacky (puisque c'est de manière explicite sur le problème plutôt que de simplement pousser le navigateur à utiliser le GPU).

Cela dit, il est important de garder à l'esprit que prise en charge du navigateur est pas bon pour la will-change (mais si le problème est avec Chrome seulement alors ce pourrait être une bonne chose!), et dans certaines situations, il peut introduire les problèmes de son propre, mais encore, c'est une autre solution possible à ce problème.

InformationsquelleAutor Nick F
10

J'étais besoin d'appliquer à la fois backface-visibility et transform règles pour éviter ce problème.
Comme ceci:
```
a     { -webkit-transform: rotate(0);}
a img { -webkit-backface-visibility: hidden;}
```
InformationsquelleAutor Jamland
10

J'ai eu un problème similaire avec (non-opacité) filtres sur le vol stationnaire. Fixé par l'ajout d'une règle de la classe de base avec:
```
filter: brightness(1.01);
```
- Même problème avec un filtre de transition sur le vol stationnaire. Ce qu'il est corrigé pour moi aussi.
- Utilisation du filtre: réglage de la luminosité(1); sur l'élément img, il fixe pour moi, merci
- cela a fonctionné pour moi, avait une 1px problème lors de l'application de niveaux de gris filtre sur une image sur le vol stationnaire. Pourquoi ne peut-navigateur devs corriger toutes ces choses enfin? Pourquoi dois-je utiliser le backface-visibilité et tous ces trucs....
- Cela résout-il, mais la transition de l'animation des arrêts de travail
InformationsquelleAutor Juan Casares
5

backface-visibilité (ou -webkit-backface-visibilité) seulement résolu le problème en Chrome pour moi. De fixer à 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
}
```
InformationsquelleAutor andersra
5

J'ai rencontré un problème similaire dans Safari 8.0.2, où les images de la gigue comme leur opacité de la transition. Aucun des correctifs postés ici travaillé, cependant le suivant: de
```
-webkit-transform: translateZ(0);
```
Tout le crédit à cette réponse via cette réponse
- J'ai essayé toutes les autres réponses, c'était le seul qui a fonctionné!
InformationsquelleAutor James Fletcher
2

J'ai rencontré ce problème avec des images dans une grille, chaque image a été imbriquée dans une qui avait display: inline-block déclaré. La solution que Jamland posté ci-dessus a travaillé pour corriger le problème lorsque le display: inline-block; a déclarer sur l'élément parent.

J'ai eu une autre grille où les images ont été dans une liste non triée et j'ai été en mesure de simplement déclaré display: block; et une largeur sur le parent de l'élément de liste et a déclaré le backface-visibility: hidden; sur l'élément d'image et il ne semble pas être une position de décalage sur le vol stationnaire.
```
li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
```
InformationsquelleAutor user2125009
2

La solution alpipego était servi de moi dans ce problème.
Utilisation -webkit-backface-visibility: hidden;
Ainsi, l'image sans déplacer en stationnaire, l'opacité de transition
```
/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
```
InformationsquelleAutor Lenin Zapata
2

J'ai eu le problème avec toutes les autres solutions ici, car ils nécessitent des modifications de la CSS qui pourrait se briser d'autres choses -- position:relative m'oblige à repenser complètement la façon dont je suis le positionnement de mes éléments, transform:rotate(0) peut interférer avec les transformations existantes et donne déglingués peu d'effets de transition quand j'en transition-durée, et le backface-visibilité ne fonctionnera pas si jamais j'ai réellement besoin d'un backface (et nécessite beaucoup de préfixation.)

Le plus paresseux de la solution que j'ai trouvé est de définir une opacité sur mon élément qui est très proche, mais pas tout à fait 1. C'est seulement un problème si l'opacité est 1, donc il ne va pas casser ou interférer avec aucun de mes autres styles:
```
opacity:0.99999999;
```
InformationsquelleAutor Josh from Qaribou
1

Ayant marqué Rick Giner réponse comme correcte j'ai alors découvert qu'il ne corrige pas le problème.

Dans mon cas, j'ai réactif largeur des images contenues dans un max-width div. Une fois le site de la largeur de traverse que la largeur maximale des images déplacer sur le vol stationnaire (à l'aide de css transform).

La solution dans mon cas était simplement de modifier la largeur maximale d'un multiple de trois, de trois colonnes dans ce cas, et il a fixé à la perfection.
- Merci pour le commentaire, j'ai aussi remarqué la position relative ne fonctionne toujours comme solution donc si ce problème apparaît de nouveau, je vais essayer votre méthode de trop.
InformationsquelleAutor sidonaldson
0

J'ai remarqué que vous aviez l'opacité inclus dans votre CSS. J'ai eu exactement le même problème avec Chrome (à l'image en mouvement sur le vol stationnaire) .. j'ai tout désactiver l'opacité et il a été résolu, plus d'images en mouvement.
```
.yourclass:hover {
  /* opacity: 0.6; */
}
```
InformationsquelleAutor cssninja
0

Eu le même problème, Ma solution était de mettre la classe avant l'img src dans l'onglet.

InformationsquelleAutor Beached As

Vous devez vous connecter pour publier un commentaire.