O efeito de transição CSS torna a imagem embaçada / move a imagem 1px, no Chrome?

Eu tenho alguns CSS que, ao passar o mouse, um efeito de transição CSS move uma div.

O problema, como você pode ver no exemplo, é que a translatetransição tem o horrível efeito colateral de fazer com que a imagem na div se mova 1px para baixo / direita (e possivelmente redimensione levemente?) Para que ela pareça deslocada e fora de foco...

A falha parece se aplicar o tempo todo em que o efeito de foco é aplicado e, a partir de um processo de tentativa e erro, posso dizer com segurança que apenas parece ocorrer quando a transição de conversão move a div (a sombra e a opacidade da caixa também são aplicadas, mas não fazem diferença para o erro quando removido).

O problema parece acontecer apenas quando a página possui barras de rolagem. Portanto, o exemplo com apenas uma instância da div é bom, mas mais uma vez divs idênticas são adicionadas e a página requer uma barra de rolagem, o problema ocorre novamente ...

Atualização 2020

• Se você tiver problemas com imagens borradas, verifique também as respostas abaixo, especialmente a image-renderingpropriedade CSS.
• Para melhores práticas de acessibilidade e SEO, você pode substituir a imagem de plano de fundo por uma <img>tag usando a propriedade CSS de ajuste ao objeto .

Resposta original

Tente isso em seu CSS :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

O que isso faz é fazer com que a divisão se comporte "mais em 2D".

• A face posterior é desenhada como padrão para permitir que as coisas sejam giradas e rotacionadas. Não é necessário que você se mova apenas para a esquerda, direita, para cima, para baixo, dimensione ou gire (no sentido anti-horário).
• Traduzir eixo Z para sempre ter um valor zero.
• O Chrome agora lida com backface-visibilitye transformsem o -webkit-prefixo. No momento, não sei como isso afeta a renderização de outros navegadores (FF, IE); portanto, use as versões não prefixadas com cautela.

Você precisa aplicar a transformação 3d ao elemento, para que ele obtenha sua própria camada composta. Por exemplo:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

ou

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Mais sobre os critérios de criação de camadas, você pode ler aqui: Renderização acelerada no Chrome

Uma explicação:

Exemplos (passe a caixa verde):

• Problema: a transição pode causar um efeito intermitente nos elementos irmãos (OSx Lion, Chrome 30)
• Solução: um elemento em sua própria camada composta

Quando você usa qualquer transição no seu elemento, ele faz com que o navegador recalcule os estilos, re-layout do seu conteúdo, mesmo que a propriedade da transição seja visual (nos meus exemplos, é uma opacidade) e, finalmente, pinte um elemento:

O problema aqui é o re-layout do conteúdo que pode afetar os elementos "dançando" ou "piscando" na página durante a transição. Se você for para as configurações, marque a caixa de seleção "Mostrar camadas compostas" e aplique a transformação 3d a um elemento, verá que ele obtém sua própria camada, delineada com borda laranja.

Depois que o elemento obtém sua própria camada, o navegador só precisa compor as camadas na transição sem re-layout ou mesmo operações de pintura, para que o problema precise ser resolvido:

Teve o mesmo problema com o iframe do youtube incorporado (as traduções foram usadas para centralizar o elemento iframe). Nenhuma das soluções acima funcionou até tentar redefinir os filtros css e a mágica.

Estrutura:

<div class="translate">
     <iframe/>
</div>

Estilo [antes]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Estilo [depois]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Eu recomendei um novo atributo experimental CSS que testei no navegador mais recente e é bom:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

Com isso, o navegador conhecerá o algoritmo para renderização

Acabei de encontrar outro motivo pelo qual um elemento fica embaçado ao ser transformado. Eu estava usando transform: translate3d(-5.5px, -18px, 0);para reposicionar um elemento depois que ele foi carregado, no entanto, esse elemento ficou embaçado.

Eu tentei todas as sugestões acima, mas aconteceu que eu estava usando um valor decimal para um dos valores de conversão. Números inteiros não causam o desfoque, e quanto mais longe eu era do número inteiro, pior o desfoque se tornava.

ou seja, 5.5pxborra o elemento mais, 5.1pxmenos.

Só pensei em jogar isso aqui, caso isso ajude alguém.

Enganei o problema usando a transição por etapas, não suavemente

transition-timing-function: steps(10, end);

Não é uma solução, é uma trapaça e não pode ser aplicada em qualquer lugar.

Não sei explicar, mas funciona para mim. Nenhuma outra resposta me ajuda (OSX, Chrome 63, tela sem retina).

https://jsfiddle.net/tuzae6a9/6/

Escalar para dobrar e reduzir para metade com zoomfuncionou para mim.

transform: scale(2);
zoom: 0.5;

Eu tentei cerca de 10 soluções possíveis. Misturá-los e eles ainda não funcionaram corretamente. Havia sempre 1px shake no final.

Acho a solução reduzindo o tempo de transição no filtro.

Isso não funcionou:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

Solução:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

Tente isso no violino:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

Espero que isso ajude alguém.

Experimentar filter: blur(0);

Funcionou para mim

Para mim, agora em 2018. A única coisa que resolveu o meu problema (uma linha branca intermitente que passa por uma imagem em foco) foi aplicá-la ao meu elemento de link, mantendo o elemento de imagem que possui transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

Ajudei-me a definir o valor da duração da .3stransição com etapas iguais de tempo de transição.3s

Só tenho o mesmo problema. Tente definir a posição: em relação ao elemento pai, que funcionou para mim.