Texto embaçado após o uso da transformação CSS: scale (); no Chrome

Parece que houve uma atualização recente no Google Chrome que causa texto embaçado depois de fazer um transform: scale(). Especificamente, estou fazendo isso:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Se você visitar http://rourkery.com no Chrome, deverá ver o problema na área de texto principal. Não costumava fazer isso e parece não afetar outros navegadores de kit da web (como o Safari). Houve outras postagens sobre pessoas com problemas semelhantes nas transformações 3D, mas não conseguimos encontrar nada sobre transformações 2D como esta.

Todas as idéias seriam apreciadas, obrigado!

Eu tenho esse problema várias vezes e parece haver duas maneiras de corrigi-lo (mostrado abaixo). Você pode usar uma dessas propriedades para corrigir a renderização ou ambas ao mesmo tempo.

A visibilidade da face traseira oculta corrige o problema, pois simplifica a animação apenas na frente do objeto, enquanto o estado padrão é a frente e a traseira.

backface-visibility: hidden;

O TranslateZ também funciona, pois é um truque para adicionar aceleração de hardware à animação.

transform: translateZ(0);

Ambas as propriedades corrigem o problema que você está tendo, mas algumas pessoas também gostam de adicionar

-webkit-font-smoothing: subpixel-antialiased;

ao seu animado para objetar. Acho que ele pode alterar a renderização de uma fonte da Web, mas fique à vontade para experimentar esse método também.

Para melhorar o embaçamento, esp. no Chrome, tente fazer o seguinte:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

ATUALIZAÇÃO: A perspectiva adiciona distância entre o usuário e o plano z, que tecnicamente dimensiona o objeto, fazendo com que o embaçamento pareça 'permanente'. O perspective(1px)acima é como uma fita de pato, porque estamos combinando com o embaçamento que estamos tentando resolver. Você pode ter melhor sorte com o css abaixo:

transform: translateZ(0);
backface-visibility: hidden;

Descobri que o ajuste da proporção da escala ajudou um pouco.

Usando scale(1.048)mais(1.05) parecia gerar uma melhor aproximação a um tamanho de fonte de pixel inteiro, reduzindo a desfocagem do sub-pixel.

Também usei o translateZ(0)que parece ajustar a etapa de arredondamento final do Chrome na animação de transformação. Essa é uma vantagem para o meu uso em trânsito, porque aumenta a velocidade e reduz o ruído visual. Para uma função onclick, no entanto, eu não a usaria porque, a fonte transformada não parece tão crocante.

Depois de tentar tudo o resto aqui sem sorte, o que finalmente resolveu esse problema foi a remoção da will-change: transform;propriedade. Por alguma razão, causou uma escala horrivelmente embaçada no Chrome, mas não no Firefox.

Ao invés de

transform: scale(1.5);

usando

zoom : 150%;

corrige o problema de desfoque de texto no Chrome.

Isso deve ser um erro no Chrome (versão 56.0.2924.87), mas o abaixo corrige o borrão para mim ao alterar as propriedades de css no console ('. 0'). Vou denunciá-lo.

filter: blur(.0px)

Sunderls me levam à resposta. Exceto filter: scalenão existe, mas existe filter: blur.

Aplique as próximas declarações aos elementos que parecem desfocados (no meu caso, eles estavam dentro de um elemento transformado):

backface-visibility: hidden;    
-webkit-filter: blur(0);

É quase funcionou perfeitamente. " Quase " porque estou usando uma transição e, enquanto está em transição, os elementos não parecem perfeitos, mas depois que a transição é concluída, eles o fazem.

Eu descobri que o problema ocorre em transformações relativas de qualquer maneira. translateX (50%), escala (1.1) ou o que for. fornecer valores absolutos sempre funciona (não produz texto embaçado (ures)).

Nenhuma das soluções mencionadas aqui funcionou e acho que ainda não há solução (usando o Chrome 62.0.3202.94 enquanto escrevo isso).

No meu caso, transform: translateY(-50%) translateX(-50%)causa o desfoque (quero centralizar uma caixa de diálogo).

Para alcançar valores um pouco mais "absolutos", tive que definir valores decimais como transform: translateY(-50.09%) translateX(-50.09%).

NOTA

Tenho certeza de que esses valores variam em diferentes tamanhos de tela. Eu só queria compartilhar minhas experiências, caso isso ajude alguém.

Eu encontrei uma solução muito melhor e limpa:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

ou

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Graças a este post: Evitando a renderização embaçada com o transform: scale

Adicionando perspective(1px)funcionou para mim.

transform: scale(1.005);

para

transform: scale(1.005) perspective(1px);

Tente usar zoom: 101%;projetos complexos quando não puder usar uma combinação de zoom + escala.

No meu caso, o código a seguir causou uma fonte borrada:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

e apenas adicionar a propriedade zoom corrigiu isso para mim. Brinque com o zoom, a seguir funcionou para mim:

zoom: 97%;   

Outra correção a ser encontrada nas transformações embaçadas (translate3d, scaleX) no Chrome é definir o elemento como " display: inline-table ;". Parece forçar o arredondamento de pixels em alguns casos (no eixo X).

Eu li que o posicionamento do subpixel no Chrome foi planejado e os desenvolvedores não o corrigem.

Atualização de 2019
O bug de exibição do Chrome ainda não foi corrigido e, embora não seja culpa dos usuários, nenhuma das sugestões oferecidas na totalidade deste site ajuda a resolver o problema. Posso concordar que tentei cada um deles em vão: apenas 1 chega perto e essa é a regra do css: filter: blur (0); que elimina a mudança de um contêiner em 1px, mas não resolve o erro de exibição desfocada do próprio contêiner e de qualquer conteúdo que ele possa ter.

Aqui está a realidade: literalmente, não há solução para esse problema, então aqui está uma solução alternativa para sites fluidos

CASO
Atualmente, estou desenvolvendo um site fluido e tenho 3 divs, todos centralizados com efeitos de foco e compartilhando valores percentuais na largura e na posição. O bug do Chrome ocorre no contêiner central, definido para a esquerda: 50%; e transformar: translateX (-50%); uma configuração comum.

EXEMPLO: Primeiro o HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Aqui está o CSS onde o bug do Chrome ocorre ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Aqui está o CSS fixo ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Violino com bug: https://jsfiddle.net/m9bgrunx/2/
Violino fixo: https://jsfiddle.net/uoc6e2dm/2/

Como você pode ver, uma pequena quantidade de ajustes no CSS deve reduzir ou eliminar o requisito de usar a conversão para o posicionamento. Isso também se aplica a sites de largura fixa e fluidos.

Eu tenho esse mesmo problema. Corrigi isso usando:

.element {
  display: table
}

Nenhuma das opções acima funcionou para mim. Eu tive essa animação para pop-ups:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

No meu caso, o efeito embaçado desapareceu após a aplicação desta regra: -webkit-perspective: 1000;mesmo que esteja marcada como não utilizada no inspetor do Chrome.

Minha solução foi:

display: inicial;

Então ficou crocante

Nenhuma das opções acima funcionou para mim.

Funcionou quando adicionei perspectiva

ou seja, de

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

eu mudei para

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Corrigi meu caso adicionando:

transform: perspective(-1px)

PARA CHORME:

Eu tentei todas as sugestões aqui. Mas não funcionou. Minha faculdade encontrou uma ótima solução, que funciona melhor:

Você NÃO deve ultrapassar 1,0

E inclua translateZ(0)no foco, mas NÃO na posição inicial / sem foco.

Exemplo:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Eu usei uma combinação de todas as respostas e foi isso que funcionou para mim no final:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Eu estava enfrentando o problema de texto embaçado no Chrome, mas não no Firefox quando usei transform: translate(-50%,-50%).

Bem, eu realmente tentei várias soluções alternativas, como:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Nada disso funcionou para mim.

Finalmente, ajustei a altura e a largura do elemento. Resolveu o problema para mim !!!

Nota: Pode depender do caso de uso para o caso de uso. Mas certamente vale a pena tentar!

Eu tentei muitos exemplos dessas respostas, infelizmente, nada de ajuda para o Chrome que Version 81.0.4044.138 eu adicionei ao elemento de transformação.

 transform-origin: 50% 50%;

este

 transform-origin: 51% 51%;

isso ajuda para mim

Para mim, o problema era que meus elementos estavam usando transformStyle: preserve-3d. Percebi que isso não era realmente necessário para o aplicativo e removê-lo corrigiu o embaçamento.

Eu removi isso do meu código - transform-style: preserve-3d; e adicionei this-transform: perspective(1px) translateZ(0);

o borrão foi embora!

No Chrome 74.0.3729.169, atual em 25/5/19, não parece haver nenhuma correção para o desfoque ocorrido em determinados níveis de zoom do navegador causados ​​pela transformação. Mesmo um simples TransformY(50px)irá desfocar o elemento. Isso não ocorre nas versões atuais do Firefox, Edge ou Safari e não parece ocorrer em todos os níveis de zoom.

Será difícil resolver com apenas css.

Então eu resolvi com o jquery.

Este é o meu CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

e este é o meu jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Apenas para adicionar à mania das correções, colocar {border: 1px solid # ???} em torno do objeto de aparência ruim corrige o problema para mim. Caso você tenha uma cor de fundo estável, considere isso também. Isso é tão idiota que ninguém pensou em mencionar, eu acho, eh eh.

você pode usar o css filterpara corrigir isso.

.element {
    filter: blur(0);
}

sobre prefixo do fornecedor, faça você mesmo. -webkit-filter, -ms-filter. detalhes estão aqui http://browser.colla.me/show/css_transformation_scale_cause_blurring

O texto não serão borradas se você não faz transitionotransform .

Apenas faça o seguinte:

&:hover {
    transform: scale(1.1);
}

Sem a transição como transition: all .2s;