Texto pós-animação desfocado / distorcido baseado em Webkit via translate3d

Esse problema parece afetar todos os navegadores baseados no WebKit, incluindo o iPhone.

Primeiro alguns antecedentes. O site em que estou trabalhando usa uma animação ‘deslizante’ baseada em JavaScript que é basicamente idêntica a esta: http://www.assistly.com/product-tour/#/easy-setup

A única diferença é que estou usando o -webkit-transform: translate3d para ‘power’ a animação real. Ao usar esse método, ao contrário de um método baseado em JavaScript, o texto fica todo borrado quando o conteúdo é animado. Isso é especialmente perceptível no iPhone.

Algumas soluções que vi foram remover um posicionamento relativo, o que fiz, e adicionar uma regra para -webkit-font-smoothing: antialiased , que também fiz. Nenhuma mudança fez a menor diferença.

A única maneira que eu poderia fazer isso funcionar corretamente sem texto borrado era usar JavaScript regular para a animação e ignorar o translate3d completamente. Eu preferiria usar o translate3d porque ele executa muito mais rápido em dispositivos habilitados para o WebKit, mas, para minha vida, não consigo entender por que ele está afetando o texto de maneira tão ruim.

Qualquer sugestão ou solução seria muito apreciada.

Como @Robert mencionado acima, às vezes, adicionar plano de fundo ajuda, mas nem sempre.

Então, para o exemplo que Dmitry adicionou, essa não é a única coisa que você deve fazer: exceto de fundo, você deve dizer ao navegador para usar explicitamente o anti-aliasing apropriado, então, há um exemplo fixo de Dmitry: http://jsfiddle.net / PtDVF / 1 /

Você precisa adicionar esses estilos ao redor (ou para os) blocos em que você precisa corrigir o anti-aliasing:

 background: #FFF; /* Or the actual color of your background/applied image */ -webkit-font-smoothing: subpixel-antialiased; 

Nenhum destes parece ter funcionado para mim, mas eu encontrei uma solução um pouco suja, que parecia fazer o truque:

 top: 49.9%; left: 49.9%; -webkit-transform: translate(-50.1%, -50.1%); transform: translate(-50.1%, -50.1%); 

Eu consertei esse problema adicionando um estilo translate3d ao elemento antes que qualquer animação ocorra.

 -webkit-transform: translate3d(0,0,0); 

Eu tive exatamente o mesmo problema descrito no post de Ken Avila: CSS: transform: translate (-50%, -50%) faz textos embaçados

O problema era claro que eu usei transform: translate (-50%, -50%) o que fez meu conteúdo centralizado ficar embaçado, mas apenas no safari no osx.

Não é apenas o texto que se torna embaçado, mas todo o conteúdo, incluindo imagens. Eu li em: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ que a “embaçada” é devido a que o elemento é processado em um limite não-inteiro.

Eu também descobri que eu poderia evitar usar transformar traduzir na parte horizontal da minha centralização deste post: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css -position-absolute-fixed -O único problema foi que eu tive que introduzir um wrapper.

Descobri que usar transform: translateY (-50%) não criou nenhuma “bluryness”, talvez porque meu elemento tenha uma altura definida e, portanto, não acabe renderizando em um limite não inteiro.

Minha solução, portanto, acabou assim:

 .wrapper { position: fixed; left: 50%; top: 50%; } .centered { position: relative; left: -50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 
 
Content

Os elementos que você está traduzindo devem ser divisíveis por dois com números pares.

É importante que qualquer elemento que você esteja tentando mudar pela metade seja divisível por dois para ambos: largura e altura. Muito semelhante às imagens responsivas, quando as coisas podem ser movidas em 50% sem dividir os pixels.

Um div com uma largura de: 503px e uma altura de 500px irá causar desfocagem, não importa o caminho que você mova ou por quanto usando translateX ou Y. Usando transform, ele usa acelerador gráfico GPU que deve resultar muito nítido, suave arestas. Também pode ser uma boa idéia definir o tamanho da checkbox: border-box; para garantir que as larguras calculadas incluam preenchimento e bordas.

Tenha cuidado ao usar larguras percentuais. Se for relativo ao tamanho da canvas, qualquer outra largura de pixel da canvas causará esse desfoque.

Veja WebKit: Texto embaçado com escala de css + translate3d para uma solução. Isso funciona muito bem, você tem que ajustar muito embora.

Esta é a melhor solução translateX(calc(-50% + 0.5px))

Nenhuma dessas respostas funcionou para mim, mas usando

 display: inline-table; 

fez o truque

Acabei de consertar isso com um truque simples que não sei o motivo. Aqui você pode ver o diferente.

Originalmente, eu estilizei o elemento assim:

 top: 50%; left: 50%; transform: translate(-50%, -50%); 

O que leva ao texto embaçado … Depois do teste random, eu coloquei o estilo no estilo da class e forcei o processador CSS a usar esse estilo em vez do estilo do elemento (como estou usando os componentes React, os estilos definidos pelo React se tornarão estilo do elemento)

Isso foi o que eu fiz.

 .class-name { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } 

Eu realmente quero saber por que mover esse estilo de estilo de elemento para estilo de class resolveria isso. Qualquer ideia?

Provavelmente a solução mais fácil:

 transform: translate(-50%, -50%) scale(2); zoom:.5; 

Escala e zoom cuidam de arredondar os valores de pixel para números inteiros

Usando zoom resolveu para mim.

Acabei de adicionar zoom: 1.04;

Espero que isso seja centralizar o object no centro exato da canvas. O borrão acontece com a transformação: translate (-50%, – 50%);

então ao invés de fazer

 position: absolute; margin:0; top: 50%; left: 50%; transform: translate(-50%,-50%); 

Eu tentei injetar estilo no elemento usando javascript. (React.js)

 const node = ReactDOM.findDOMNode(this); var width = node.offsetWidth; var height = node.offsetHeight; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; style={ left : (windowWidth/2) - (this.state.width/2) + 'px', right: (windowWidth/2) - (this.state.width/2) + 'px', top: (windowHeight/2) - (this.state.height/2) + 'px', bottom: (windowHeight/2) - (this.state.height/2) + 'px' } 

injetar estilo no elemento pelo estilo javascript

Por exemplo.

 export default class Dialog extends React.Component { constructor(props) { super(props); this.state = { width: '0px', height: '0px' }; } setWidthhandHeight(node){ if (this.state.width !== node.offsetWidth) { this.setState({ width: node.offsetWidth, height: node.offsetHeight }); } } componentDidMount() { this.setWidthhandHeight(node); } render() { const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; return (  {this.props.title ? ( 
{this.props.title}
) : null } {this.props.children}
); } }

@kizu Essas respostas e sugestões não ajudam. Para o seu jsfiddle você precisa adicionar

-webkit-perspective-origin: 50% 50%; -webkit-perspective: 1400px;

para o elemento pai do elemento em que você deseja usar o translate3d, senão a tradução do eixo z não faz nada. Nesse caso, você está aplicando-o ao botão em que clicou, acho que você quis aplicá-lo ao conteúdo.

Mas, de qualquer forma, adicioná-los para ativar a alteração do eixo z faz com que o desfoque do botão no seu exemplo.

Eu adoraria encontrar uma solução para isso também, temo que não haja uma.

Para uma solução alternativa, tente:

 -webkit-text-stroke: 0.35px 

Eu uso will-change nesses tipos de problemas, geralmente resolve problemas de escala ou erros de arredondamento, como ver uma linha branca de 1px separando elementos por exemplo.

will-change: transform;

Leia mais aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/will-change

O uso do documento HTML5 resolveu o problema para mim.

 < !doctype html>