imagem se move ao pairar - problema de opacidade do cromo

Parece haver um problema com minha página aqui: http://www.lonewulf.eu

Ao passar o mouse sobre as miniaturas a imagem se move um pouco para a direita, e isso só acontece no Chrome.

Meu 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;
}

Outra solução seria usar

-webkit-backface-visibility: hidden;

no elemento de foco que tem a opacidade. A visibilidade da face posterior está relacionada a transform, então @Beskow tem algo a ver com isso. Como é um problema específico do webkit, você só precisa especificar a visibilidade da face posterior do webkit. Existem outros prefixos de fornecedores .

Consulte http://css-tricks.com/almanac/properties/b/backface-visibility/ para obter mais informações.

Por algum motivo, o Chrome interpreta a posição dos elementos sem opacidade 1 de uma maneira diferente. Se você aplicar o atributo CSS position:relativeaos seus elementos a.img, não haverá mais movimento para a esquerda / direita, pois sua opacidade varia.

Eu tive o mesmo problema, corrigi-lo com css transform rotate. Como isso:

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

Funciona bem nos principais navegadores.

Outra solução que corrigiu esse problema para mim foi adicionar a regra:

will-change: opacity;

No meu caso específico, isso evitou um problema de salto de pixel semelhante ao translateZ(0)introduzido no Internet Explorer, apesar de corrigir as coisas no Chrome.

A maioria das outras soluções sugeridas aqui que envolvem transformações (por exemplo. translateZ(0), rotate(0), translate3d(0px,0px,0px), Etc) de trabalho pela entrega pintura do elemento para o GPU, permitindo renderização mais eficiente. will-changefornece uma dica ao navegador que presumivelmente tem um efeito semelhante (permitindo que o navegador renderize a transição de forma mais eficiente), mas parece menos hacky (uma vez que está abordando explicitamente o problema em vez de apenas cutucar o navegador para usar a GPU).

Dito isso, vale a pena ter em mente que o suporte do navegador não é tão bom para will-change(embora se o problema for apenas com o Chrome, então isso pode ser uma coisa boa!) E, em algumas situações, pode apresentar problemas próprios , mas ainda assim , é outra solução possível para esse problema.

Eu precisava aplicar as regras backface-visibilitye transformpara evitar essa falha. Como isso:

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

Tive um problema semelhante com filtros (sem opacidade) ao pairar. Corrigido adicionando uma regra à classe base com:

filter: brightness(1.01);

backface-visibility (ou -webkit-backface-visibility) apenas corrigiu o problema no Chrome para mim. Para consertar no Firefox e no Chrome, usei a seguinte combinação das respostas acima.

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

Eu encontrei um problema semelhante no Safari 8.0.2, onde as imagens tremiam conforme sua opacidade fazia a transição. Nenhuma das correções postadas aqui funcionou, mas o seguinte funcionou:

-webkit-transform: translateZ(0);

Todo o crédito a esta resposta por meio desta resposta subsequente

Eu encontrei esse problema com imagens em uma grade, cada imagem estava aninhada em um que tinha display: inline-block declarado. A solução que Jamland postou acima funcionou para corrigir o problema quando o display: inline-block; foi declarado no elemento pai.

Eu tinha outra grade onde as imagens estavam em uma lista não ordenada e consegui apenas declarar display: block; e uma largura no item da lista pai e visibilidade da face posterior declarada: oculto; no elemento de imagem e não parece haver nenhuma mudança de posição ao pairar.

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

A solução alpipego foi-me servida neste problema. Use -webkit-backface-visibility: hidden; Com isso a imagem não se move na transição de opacidade de foco

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

Tive problemas com todas as outras soluções aqui, pois elas exigem alterações no CSS que podem quebrar outras coisas - position: relative exige que eu repense completamente como estou posicionando meus elementos, transform: rotate (0) pode interferir na existência transforma e dá pequenos efeitos de transição instáveis ​​quando tenho uma duração de transição definida, e a visibilidade da face posterior não funcionará se eu realmente precisar de uma face posterior (e requer muitos prefixos).

A solução mais preguiçosa que encontrei é apenas definir uma opacidade em meu elemento que é muito próxima, mas não totalmente, de 1. Isso só é um problema se a opacidade for 1, então não vai quebrar ou interferir em qualquer um dos meus outros estilos:

opacity:0.99999999;

Tendo marcado a resposta de Rick Giner como correta, descobri que o problema não estava resolvido.

No meu caso, tenho imagens de largura responsiva contidas em uma div de largura máxima. Uma vez que a largura do site cruza a largura máxima, as imagens se movem em foco (usando a transformação CSS).

A correção no meu caso foi simplesmente corrigir a largura máxima para um múltiplo de três, três colunas neste caso, e isso corrigiu perfeitamente.

Percebi que você tinha opacidade incluída em seu CSS. Eu tive exatamente o mesmo problema com o Chrome (a imagem movendo-se ao pairar) ... tudo que fiz foi desativar a opacidade e foi resolvido, sem mais imagens se movendo.

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

Tive o mesmo problema, minha correção foi colocar a classe antes do src na guia img.