O efeito de transição de CSS faz com que a imagem fique borrada / mova a imagem 1px no Chrome?

Quando o div é passado, um efeito de transição CSS move o div.

O problema, como você pode ver no exemplo, é que a transição “traduzir” tem o horrível efeito colateral de fazer a imagem no div se mover 1px para baixo / direita (e possivelmente resize tão ligeiramente?) Para que apareça de lugar e fora de foco …

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

2 EDIT: Na verdade, problema não resolvido!

Ao criar um JSFiddle para ilustrar o problema, me deparei com uma observação interessante. O problema só acontece quando a página tem barras de rolagem. Portanto, o exemplo com apenas uma instância da div é bom, mas depois que mais divs idênticas são adicionadas e a página requer uma barra de rolagem, o problema ataca novamente …

Alguma ideia?!

Você já tentou isso em CSS ?

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

O que isto faz é fazer com que a divisão se comporte “mais 2D”.

  • Backface é desenhado como padrão para permitir inverter as coisas com rotação e tal. Não há necessidade disso se você só se mover para a esquerda, para a direita, para cima, para baixo, dimensionar ou girar (contra) no sentido horário.
  • Traduza o eixo Z para ter sempre um valor zero.

Editar

O Chrome agora manipula backface-visibility da -webkit- e a transform sem o prefixo -webkit- . Atualmente, não sei como isso afeta a renderização de outros navegadores (FF, IE), portanto, use as versões sem prefixo com cuidado.

Você precisa aplicar a transformação 3D ao elemento, para obter 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 que você pode ler aqui: Renderização Acelerada no Chrome


Uma explicação:

Exemplos (pairar checkbox verde):

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

Quando você usa qualquer transição em seu elemento, ele faz com que o navegador recalcule os estilos e, em seguida, reorganiza seu conteúdo, mesmo se a propriedade de transição for visual (em meus exemplos, é uma opacidade) e, finalmente, pintar um elemento:

captura de tela

A questão aqui é o novo layout do conteúdo que pode fazer um efeito de elementos “dançando” ou “piscando” na página enquanto a transição acontece. Se você for para as configurações, marque a checkbox de seleção “Mostrar camadas compostas” e, em seguida, aplique a transformação 3D a um elemento, você verá que ele obtém sua própria camada, que contornou a borda laranja.

captura de tela

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 pintar as operações, para que o problema tenha que ser resolvido:

captura de tela

Tive o mesmo problema com o iframe do youtube (Translations foi usado para centralizar o elemento iframe). Nenhuma das soluções acima funcionou até tentou redefinir filtros css e mágica aconteceu.

Estrutura:

 

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 saberá o algoritmo para renderizar

Tente o filter: blur(0);

Funcionou para mim

Apenas encontrei outro motivo pelo qual um elemento fica embaçado quando está sendo transformado. Eu estava usando transform: translate3d(-5.5px, -18px, 0); para reposicionar um elemento depois de ter sido carregado, no entanto, esse elemento ficou desfocado.

Eu tentei todas as sugestões acima, mas descobriu-se que era devido a mim usando um valor decimal para um dos valores de tradução. Números inteiros não causam o borrão, e quanto mais longe eu saía do número inteiro, pior ficava o borrão.

ou seja, 5.5px desfoca o elemento mais, 5.1px menos.

Só pensei em jogar isso aqui para o caso de ajudar alguém.

Eu 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 pode ser aplicada não em todo lugar.

Eu não posso explicar isso, mas funciona para mim. Nenhuma das outras respostas me ajuda (OSX, Chrome 63, exibição não-Retina).

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

Escalar para dobrar e diminuir para metade com zoom funcionou para mim.

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

Fui ajudado pela definição do valor da duração da transição .3s etapas de tempo de transição iguais .3s

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

Eu acho 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); } 
 

Para mim, agora em 2018. A única coisa que corrigiu o meu problema (uma linha branca intermitente percorrendo uma imagem em foco) foi aplicar isso ao meu elemento link mantendo o elemento image que 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; } 

Só tenho o mesmo problema. Tente definir position: relativo ao elemento pai, que funcionou para mim.