imagem se move ao pairar - problema de opacidade do cromo

92

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;
}
zefs
fonte
Não se move para mim em22.0.1229.94 m
Danny
3
É uma prática recomendada colocar o foco na tag A, não na imagem em si.
Diodeus - James MacFarlane
Sim. Img é uma classe href. Devo dar um nome diferente? talvez agora esteja em conflito com <img src>? EDIT: Nvm, mudei o nome de .img para .thumb e ainda estou tendo esse problema. Alguma outra sugestão?
zefs de
Provavelmente é algo que o Fancybox está fazendo.
Diodeus - James MacFarlane
4
usar uma tradução no eixo Z foi a única solução que funcionou para mim: stackoverflow.com/questions/12502234/…
Larry

Respostas:

231

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.

alpipego
fonte
Esta é a resposta correta, mas você deve dizer que a backface-visibilitypropriedade deve ser definida no imgelemento. No meu caso, o elemento que tem a opacidade foi o aelemento que envolve o img, então sua resposta não foi perfeita para mim. Aliás, também encontrei essa falha no Firefox para Mac, então sugiro usar todos os prefixos de fornecedor.
Oliboy50
1
@ Oliboy50 Desculpe, tenho que argumentar isso. No meu caso, os elementos defeituosos eram meros vazios divcom background-image. @alpipego Obrigado pela solução!
bonflash
1
Isso funcionou para mim, mas fez minhas imagens parecerem ruins, pixeladas em vez de suaves.
Kieran Hunter
1
Não sei por que funciona, mas descobri isso e tentei. Isso corrigiu um bug que continuava aparecendo no meu site por meses, que eu nunca conseguia descobrir. Obrigado!
Shnibble de
Eu também tive que adicionar um z-indexpara fazer o efeito de foco funcionar corretamente para mim.
Jack
34

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.

Rick Giner
fonte
1
Alguém sabe por que isso acontece? Certamente não é uma coisa hasLayout?
Sidonaldson
7
Tive o mesmo problema no Firefox agora. Relative não corrigiu, mas definir isso no elemento transform: translate3d(0px,0px,0px);
corrigiu
Tive o mesmo problema no Safari e transform: translate3d(0px,0px,0px);funcionou
zevnicsca
21

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.

Beskow
fonte
1
Obrigado por isso. Isso corrigiu no Firefox! : D
Hans Wassink
Sim, eu também. O truque do backface não funcionou para mim (img dentro de a), mas este sim! Obrigado!
Mikmikmik
Esta é a única resposta que funcionou para mim (Chrome). Obrigado!
Kid Diamond de
14

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.

Nick F
fonte
10

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

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

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

filter: brightness(1.01);
Juan Casares
fonte
O mesmo problema ocorre com uma transição de filtro ao passar o mouse. Isso consertou para mim também.
Josh Harrison
Usando filtro: brilho (1); no elemento img consertou para mim, obrigado
Sai
isso funcionou para mim, tive um problema de 1px ao aplicar o filtro de tons de cinza em uma imagem ao pairar. Por que os desenvolvedores de navegadores não conseguem consertar todas essas coisas finalmente? Por que eu tenho que usar a visibilidade da face posterior e todas essas coisas ...
Varin
Isso corrige, mas a animação de transição para de funcionar
Amin
6

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
}
Andersra
fonte
4

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

James Fletcher
fonte
Tentei todas as outras respostas, esta foi a primeira que funcionou!
2

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

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;
Lenin Zapata
fonte
2

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

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.

Sidonaldson
fonte
1
Obrigado pelo comentário, também notei que a posição relativa nem sempre funciona como solução, então se esse problema aparecer novamente vou tentar o seu método também.
zefs
0

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

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

Encalhado como
fonte