La fuente de Chrome aparece borrosa

¡Está haciendo mis ojos!

se ve bien en IE y Firefox

enter image description here

Chrome (arriba)

Ejecutar la versión 39 de Chrome, solo aparece borroso en un cuadro modal, no hace ninguna diferencia si cambio la familia de fonts.

Este es el CSS (para la etiqueta “Inicio”) el navegador representa lo siguiente

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; 

¿Es el navegador o CSS?

–ACTUALIZAR—

Ok parece que es 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%); } 

Sin embargo, si lo saco, ¿mi modal ya no se centra?

Experimenté el mismo problema en Chrome después de aplicar translate transform a uno de mis elementos. Parece ser un error en Chrome. Lo único que funcionó para mí fue esto:

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

Otra solución puede convertir el renderizado de fuente sin problemas en:

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

Este violín prueba algunas soluciones diferentes de:

Salida de prueba

Salida CSS

Fix 0

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

Fix 3

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

Resolví este problema restando 0.5px del valor del eje Y. Entonces, en lugar de hacer:

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

Hice esto:

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

Esto lo resolvió para mí y encuentro que esta es una solución más limpia que luego juguetear con el porcentaje o usar Javascript.

La única forma correcta de resolver esto:

Este problema surge del hecho de usar valores% para alinear los divs usando transformaciones css. Esto da como resultado valores decimales de subpíxeles, que su pantalla no puede mostrar correctamente. La solución es normalizar la matriz de transformación resultante.

Podría funcionar mejor para divs fijos que no hacen animación transformadora. Pero si anima, puede usar una callback posterior a esta función para corregir el estado final.

Entonces: la matriz (1,0,0,1, -375, -451,5 ) se convertiría en la matriz (1,0,0,1, -375, -451 )

Llamo a este método antes del .show () de jquery … O tal vez solo una vez en la aplicación (depende de su caso), es posible que también deba llamar esto al evento de cambio de tamaño, 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()+")"}); } 

y llámalo

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

Hermoso, ¿verdad?

Si necesita actualizar el cambio de tamaño, puede hacerlo con:

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

Para que esto funcione, todos los padres deben “estar alineados / normalizados” porque si, por ejemplo, tiene el cuerpo con x = 10.1px a la izquierda, y el hijo es 10px … el problema no desaparece debido a que el padre tiene decimales residuales en su matriz Por lo tanto, debe aplicar esta función a cada elemento que sea primario y use transformar.

Puede ver este script en vivo aquí: https://jsbin.com/fobana/edit?html,css,js,output

Gracias por el ejemplo de CSS. Parece que translateX(50%) y translateY(50%) están calculando un valor de píxel con un lugar decimal (por ejemplo, 0.5px) que causa la representación de subpíxeles.

Hay muchas soluciones para esto, pero si desea conservar la calidad del texto, su mejor solución ahora es usar -webkit-font-smoothing: subpixel-antialiased; en .md-modal para forzar el estado de renderizado para navegadores webkit como Chrome y Safari.

Terminé arreglando esto quitando estas líneas:

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

Para los cuadros modales, este CSS ayudará:

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

En lugar de colocar el eje Y al 50%, hazlo al 51%. Esto ayuda en mi cse. Si tiene un posicionamiento diferente, juegue, pero generalmente 1% de arriba / abajo corrige el contenido borroso.

Me tomó un tiempo encontrar una solución que no me molestaría en usar, así que la publicaré aquí.

El problema para mí fue que el div infantil tenía propiedades de width y height con una combinación que causaba el problema.

Cuando cambié la height por otro valor, ¡funcionó!

Esto probablemente tiene que ver con las otras respuestas, pero no quería usar ningún JS o cambiar la propiedad de transformación para solucionarlo.

Aquí hay un ejemplo en vivo: JSFIDDLE

Agregar una transición de CSS al elemento padre del elemento padre de mi elemento borroso (que estaba usando transformX que estaba causando imágenes borrosas) en realidad anuló la imagen borrosa ofensiva.