A fonte do Chrome aparece desfocada

Está fazendo meus olhos!

parece bem no IE e no Firefox

insira a descrição da imagem aqui

Chrome (acima)

Executar a versão 39 do chrome, só aparece borrada em uma checkbox modal, não faz diferença se eu mudar a família de fonts.

Este é o CSS (para o label “Start”), o navegador processa o seguinte

box-sizing: border-box; color: rgb(85, 85, 85); cursor: default; display: block; float: left; font-family: sans-serif; font-size: 12px; font-weight: 600; height: 24px; line-height: 17.142858505249px; margin-bottom: 0px; margin-top: 0px; min-height: 1px; padding-left: 15px; padding-right: 15px; padding-top: 7px; position: relative; text-align: right; visibility: visible; width: 89.65625px; 

É o navegador ou CSS?

–ATUALIZAR—

Ok parece com este CSS

 .md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto !important; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); <--- This line -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } 

No entanto, se eu tirar o meu modal não mais centros?

Eu experimentei o mesmo problema no chrome depois de aplicar translate transform em um dos meus elementos. Parece ser um bug no chrome. A única coisa que funcionou para mim foi esta:

 #the_element_that_you_applied_translate_to { -webkit-filter: blur(0.000001px); } 

Uma outra solução pode estar transformando a renderização de fonte suave em:

 #the_element_that_you_applied_translate_to { -webkit-font-smoothing: antialiased; } 

Este violino testa algumas soluções diferentes de:

Saída de teste

Saída CSS

Corrigir 0

 -webkit-transform: translateZ(0); transform: translateZ(0); 

Corrigir 3

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

Corrigi esse problema subtraindo 0,5 px do valor do eixo Y. Então, ao invés de fazer:

 transform: translateX(-50%) translateY(-50%); 

Eu fiz isso:

 transform: translateX(-50%) translateY(calc(-50% - .5px)); 

Isso resolveu para mim e eu acho isso uma solução mais limpa, em seguida, brincando com a porcentagem ou usando JavaScript.

A única maneira correta de resolver isso:

Esse problema surge do fato de usar% valores para alinhar os divs usando transformações CSS. Isso resulta em valores de subpixels decimais, que sua canvas não pode renderizar corretamente. A solução é normalizar a matriz de transformação resultante.

Pode funcionar melhor para divs fixos que não transformam animação. Mas se você animar, você pode usar um retorno de chamada após essa function para corrigir o estado final.

Então: matriz (1,0,0,1, -375, -451,5 ) se tornaria matriz (1,0,0,1, -375, -451 )

Eu chamo esse método antes do .show () de jquery … Ou talvez apenas uma vez na aplicação (depende do seu caso), você pode precisar chamar isso no evento de redimensionamento etc.

 function roundCssTransformMatrix(element){ var el = document.getElementById(element); el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline. var mx = window.getComputedStyle(el, null); //gets the current computed style mx = mx.getPropertyValue("-webkit-transform") || mx.getPropertyValue("-moz-transform") || mx.getPropertyValue("-ms-transform") || mx.getPropertyValue("-o-transform") || mx.getPropertyValue("transform") || false; var values = mx.replace(/ |\(|\)|matrix/g,"").split(","); for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; } $("#"+element).css({transform:"matrix("+values.join()+")"}); } 

e chame isso

 roundCssTransformMatrix("MyElementDivId"); $("#MyElementDivId").show(); 

Linda não é?

Se você precisar atualizar no redimensionamento, poderá fazê-lo com:

 $( window ).resize(function() { roundCssTransformMatrix("MyElementDivId"); }); 

Para que isso funcione, todos os pais devem “estar alinhados / normalizados” porque se você, por exemplo, tiver o corpo com x = 10.1px à esquerda e a criança tiver 10px … o problema não desaparecerá devido ao pai ter números decimais residuais Então você deve aplicar esta function para cada elemento que é um pai e usa a transformação.

Você pode ver este script ao vivo aqui: https://jsbin.com/fobana/edit?html,css,js,output

Obrigado pelo exemplo CSS. Parece que o translateX(50%) e translateY(50%) estão calculando um valor de pixel com uma casa decimal (por exemplo, 0.5px) que causa a renderização de subpixel.

Existem muitas correções para isso, mas se você quiser manter a qualidade do texto, sua melhor solução agora é usar -webkit-font-smoothing: subpixel-antialiased; no .md-modal para forçar o estado de renderização para navegadores webkit como o Chrome e o Safari.

Acabei consertando isso removendo estas linhas:

 -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; 

Para checkboxs modais, este css ajudará:

 -webkit-transform: translate3d(-50%, -51%, 0); -moz-transform: translate3d(-50%, -51%, 0); transform: translate3d(-50%, -51%, 0); 

Em vez de colocar o eixo Y em 50%, torne-o 51%. Isso ajuda no meu cse. Se você tem um posicionamento diferente, jogue ao redor, mas geralmente 1% para cima / baixo corrige o conteúdo embaçado.

Levei um tempo para encontrar uma solução que eu não me incomodaria em usar, então vou postar aqui.

O problema para mim era que o div infantil tinha propriedades de width e height com uma combinação que causou o problema.

Como eu mudei a height para outro valor, funcionou!

Isso provavelmente tem a ver com as outras respostas, mas eu não queria usar nenhum JS ou alterar a propriedade transform para corrigi-lo.

Aqui está um exemplo ao vivo: JSFIDDLE

Adicionando uma transição CSS ao elemento pai do elemento pai do meu elemento blurry (que estava usando transformX que estava causando desfoque) realmente cancelou o bluriness ofensivo.