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

126

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!

Ryan O'Rourke
fonte
Apenas visitei o site usando o Firefox e o IE 10, não vejo o problema. Se estiver limitado ao Chrome, pode ser necessário aguardar que o Google o conserte.
Nolonar
Não vejo qualquer desfocagem ... eu estou no Chrome v25 / PC
vsync
Também já deparei com esse problema, pois Nolonar mencionou que teremos que esperar o Google consertá-lo.
raj_n
Não é uma solução, mas notei que o problema só ocorre quando eu uso CSS optimizeLegibility.
Bangkokian 22/02/19
Link quebrado.
Timothy003

Respostas:

78

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.

2ne
fonte
12
Todas essas técnicas parecem melhorar as coisas, mas ainda não consigo obter o Chrome com o mesmo nível de clareza que vejo no Firefox.
precisa saber é o seguinte
13
backface-visibility: hidden;com certeza funcionou no meu caso, na solução de um movimento embaçado estranho causado pela transição da opacidade, isto é. O movimento estranho agora se foi, mas tornou os textos em minha div permanentemente borrados.
precisa saber é o seguinte
13
Como @ykadaru sugerido, tente adicionar perspective(1px)ao seu transform:código, isso funcionou para mim no Chrome enquanto nada resolveu o problema
Serge Eremeev
4
Não funciona na versão 65.0.3325.162 do Chrome (versão oficial) (64 bits) em execução no Ubuntu 17.10 com a sessão do Gnome X11 (Wayland desativado)
Marecky 22/03
3
No Chrome 72, as duas primeiras opções fazem com que o texto fique embaçado durante e no final da transformação
Brandito 17/01/19
24

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;
ykadaru
fonte
4
Para mim, isso realmente piora.
balu
1
Para mim, este correções a falha (sem este, o elemento se move 1px após a animação é feito, transform: perspective (1px) sozinho correção isso!)
Sergiu
@balu verifique minha resposta atualizada! livrar-se da perspective(1px)propriedade e ver se funciona melhor.
Ykadaru
16

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.

Jordan Nakamoto
fonte
1
Essa é a única abordagem que funcionou para mim. As outras abordagens (visibilidade da face posterior, adição de filtros, perspectiva e bom e velho translateZ) apenas pioraram. Tente dimensionar para pixels inteiros. Por exemplo, vá de 14px a 16px usando um fator de escala de 1,1429 (16/14).
Hugo der hungrige
1
Trabalhou para mim sem translateZ(0), mudou apenas 1.05para1.048
A. Volg
15

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.

Dan
fonte
Por que alguém rebaixaria isso? Não entendi ... :( Esse é um problema completamente válido em algumas versões do chrome, e parece que "vai mudar" em geral ainda é bastante novo e provavelmente não deve ser usado. Para obter mais informações, consulte greensock .com / will-change
Dan
Teve o mesmo problema. Obrigado por publicar.
raine
Eu tive o mesmo problema com a renderização de material-design-componentes no Chrome 75. A remoção do estilo css "alterado" foi corrigida.
21719 Rob
Confirmado no Chrome 79
Fareesh Vijayarangam
1
Eu tenho o oposto, adicionando will-change: transform;um pouco corrige o problema
Jakub Zawiślak
14

Ao invés de

transform: scale(1.5);

usando

zoom : 150%;

corrige o problema de desfoque de texto no Chrome.

Naisheel Verdhan
fonte
Ele pode ajudar, mas também introduz outras questões, como as linhas de fronteira brancos sendo introduzidas algumas vezes
Kevin
1
não sei por que o voto negativo. Quando eu aplico isso a caixas isso funcionou muito melhor do que transformar: scale ()
Brian McCall
2
Para o firefox, use transform: scale () funciona como um encanto sem qualquer embaçamento. Você precisará trabalhar na detecção do navegador e agir de acordo com o chrome / safari e o firefox.
Naisheel Verdhan
15
Outra questão é que o zoom não parece trabalho com a propriedade de transição, por isso não pode ser usado para animações CSS
ericgrosse
3
Funciona e reduz a distorção, mas também altera a posição dos elementos.
user1156544
8

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)
andyw
fonte
1
Você chegou a algum lugar com o seu relatório de bug?
Diazole #
com medo de nem me lembrar de onde enviei o bug. Fiz isso embora.
18718 Andyw #
Estou usando o Bootstrap (4.4.1), o Chrome (80.0.3987.132), o Windows 10 (com exibição de 125% em escala) e tenho textos embaçados no menu suspenso. O menu é posicionado usando transform: translate3d();e isso parece causar o problema. Nenhuma das soluções sugeridas funcionou para mim. Exceto / meio que este. Isso funciona apenas se eu o definir primeiro com algum valor positivo (por exemplo, blur(0.1px)) e depois mudar para blur(0px). Como o elemento é dinâmico e também requer uma solução dinâmica (JS), ... isso é péssimo: \
akinuri 13/03
7

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.

ruidovisual
fonte
-webkit-filter: blur(0);sozinho trabalha para mim. backface-visibility: hidden;borra meu elemento quando redefinir a escala depois.
Kai Hartmann
isso é meio engraçado para o Chrome ... se eu o definir, blur(0px);ele não será corrigido. mas se eu fizer blur(1px);e, em seguida, pressione a tecla de seta para baixo para blur(0px);que pareça correta. Ido na página de atualização / Não importa o que eu escrevo no CSS
Tom Roggero
1
@TomRoggero Parece menos específico ao valor da propriedade blur e mais sobre quando o redesenho do layout é feito. Você pode experimentar forçar o redesenho do elemento usando JavaScript após algum atraso.
Gajus
5

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.

scipper
fonte
Eu estava correndo para esse exato mesmo problema, fazendo exatamente a mesma coisa. Eu estava centralizando um modal com translate3d (-50%, -50%, 0). No meu caso, aumentei os valores para -50,048% e parece perfeito.
22419 Chris Gutierrez
4

Adicionando perspective(1px)funcionou para mim.

transform: scale(1.005);

para

transform: scale(1.005) perspective(1px);
SUHAIL KC
fonte
3

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

Tom Roggero
fonte
Observe que isso zoomnão é definido por nenhum padrão da Web e não é suportado pelo firefox caniuse.com/#feat=css-zoom
Boltgolt
3

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%;   
Raza Ahmed
fonte
4
Não há suporte para o firefoxzoom
Dustin Poissant
3

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.

Corentin
fonte
3

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.

SJacks
fonte
O embaçamento é esperado ao usar a tradução, porque o elemento pode terminar em meio pixel . Agora há melhores alternativas para as coisas de centralização: amostra flexbox , grade de amostra
Timothy003
O único navegador que testei e que parece ter um problema com o centro de transformação é o Chrome, tudo o mais parece claro. Olhei para trás e esse problema existe há 7 anos! Ainda existem muitas maneiras de esfolar um gato e, como você diz, não é mais necessário.
SJacks
isso é inacreditável, mas filter: blur (-0.1px); me ajudou !!. como diabos isso funciona?
jt3k 31/03
3

Eu tenho esse mesmo problema. Corrigi isso usando:

.element {
  display: table
}
Ravi
fonte
2
insano, mas funciona; Chrome é o novo IE, aparentemente
Arthur
oooow senhor! ir funciona! Eu acho que a tabela 'fixar' de largura no PX não era possível com largura de meio pixel ...
LuanLuanLuan
2

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.

Gendos-ua
fonte
Funciona para mim e também é marcado como não utilizado. Também adicionei will-change: transform;que corrige embaçadas das bordas dos elementos. Quaisquer outras respostas não funcionaram para mim.
Jakub Zawiślak
2

Minha solução foi:

display: inicial;

Então ficou crocante


fonte
1

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)

Sengupta Amit
fonte
Adicionando perspective(1px)realmente piorou para mim :(
balu 29/03
1

Corrigi meu caso adicionando:

transform: perspective(-1px)
Anders Lund
fonte
Isto para mim acabou de remover o scale()resultado transformar
jpenna
1

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);
}
JonasB
fonte
1

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;
}
Kyle Underhill
fonte
1

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!

Prajwal_Shenoy
fonte
1

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

Oleg Bondarenko
fonte
0

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.

Normangorman
fonte
0

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

o borrão foi embora!

Tanha Islam
fonte
0

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.

Austin McCool
fonte
Foi o que aconteceu com o meu. Não consigo me livrar desse efeito de desfoque. Uma solução que funcionou é definir essas propriedades: top: 0, bottom: 0, left: 0; right: 0; margin: automas o contêiner ocupará todo o espaço possível (deve ser a largura); portanto, isso não funcionará no caso em que o conteúdo decida qual será o tamanho do contêiner.
Kwiat1990
0

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);
    }
})}
Madstone
fonte
0

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.

user1769038
fonte
-1

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;

kyw
fonte