30 votos

Texto borroso en Internet Explorer

En mi sitio web he notado que existe una diferencia sustancial en la calidad del texto entre Firefox, Chrome e Internet Explorer. Mientras que el texto es cristalino en Chrome, y aún más en Firefox, parece borroso y fuera de foco en Internet Explorer. Aquí hay una comparación de imágenes:

Comparación de capturas de pantalla de Firefox e IE

Personalmente creo que no es estéticamente agradable a la vista. Me gustaría encontrar una solución sin pedir a los usuarios que utilicen complementos como Microsoft Silverlight, ya que no todos los usuarios querrán instalar un complemento solo para ver 1 sitio web. No entiendo cómo sitios web como Facebook y StackOverflow no tienen este problema (o al menos menos problemas).

He intentado usar filtros CSS, diferentes propiedades de renderización de fuentes y usar diferentes unidades para el tamaño de la fuente, pero no veo ningún efecto. Sé que no he probado todas las combinaciones posibles de propiedades CSS, por lo que esta podría seguir siendo la respuesta.

He estado buscando en la web y en StackOverflow durante horas y aún no he encontrado una solución. Hay otras preguntas similares aquí pero no tienen respuesta.

Cualquier ayuda, idea de a dónde ir o qué hacer, es muy bienvenida. Ejecute este fragmento en diferentes navegadores si no puede ver la imagen o el sitio web:

html,body{
  margin:0;
  height:100%;  
  font: normal 14px/24px "Lucida Sans Unicode","Lucida Grande", "Arial", sans-serif;
}
.popup{
  position:relative;
  top:50%;
  left:50%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  background-color:rgb(28, 31, 37);
  color:white;
  padding:1em;
  z-index:2;
  transform: translate(-50%,-50%);

  -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
}
p{
  font-size: small;
}
input{
  padding: 16px 12px;
  width: 250px;
  border: 0;
  background: #0A0A0A;
  color: #eee;
  font-size: 14px;
  font-family: "Open Sans",sans-serif;
  -webkit-box-shadow: inset 0 0 0 1px #323742;
  -moz-box-shadow: inset 0 0 0 1px #323742;
  box-shadow: inset 0 0 0 1px #323742;
}
#blackout {
  background: rgba(17,19,23,.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

  Comparar este texto
  Y también este texto

Curiosamente, el Fragmento se ve similar en diferentes navegadores: pero si se observa cuidadosamente hay diferencias definitivas. Chrome (Versión 44.0.2403.125 m) parece tener un efecto de borde afilado. IE (11) parece tener un ligero desenfoque. Mientras que Firefox (38.0.1), según explicó @user4749485, parece haber seleccionado lo mejor de ambos mundos para lograr la mejor legibilidad. ¿Existe una manera de calcular manualmente y ajustar la fuente solo para IE? (Otro posible método para solucionarlo).

No estoy seguro de dónde proviene el resto del desenfoque (el texto del Fragmento parece más claro aquí que el texto en mi sitio web). Si podemos descubrir de dónde proviene esta diferencia, tal vez sea más fácil resolverlo. (He estado añadiendo/eliminando CSS al Fragmento, así que perdona todas las ediciones)

TL;DR, y solo para ampliar la pregunta: Me gustaría que el texto se vea claro en IE como lo hace en Firefox o Chrome.


Comparación para la respuesta de Sergey Denisov:

Comparación de capturas de pantalla antes y después de Chrome e IE Mientras que podría usar la respuesta de Srikanth Pullela para aplicar esta transformación CSS solo a IE, tengo curiosidad por saber si hay una solución para todos los navegadores. Edit: Usaré el método mencionado anteriormente ya que la solución propuesta hace que esto suceda, lo que significa que no puedo depender de la representación de la GPU para mostrarlo correctamente:

Aspecto fallido de la ventana emergente

9voto

Srikanth Pullela Puntos 231

Lo único que sugiero es usar el código a continuación y escribir CSS por separado, para que al abrirlo en IE tome solo ese CSS.

Esto apuntará solo a versiones anteriores a IE8:

Si desea apuntar a todas las versiones de IE, use esto:

5voto

Sergey Denisov Puntos 3136

¿Intentaste agregar translateZ(0) a tu popup? En tu caso podría ser:

.popup {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

En IE11 en Windows 8.1 la fuente se ve mejor: Popup con el hack translateZ(0)

html, body {
    margin: 0;
    height: 100%;
    font: normal 14px/24px "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif;
}

.popup {
    position: relative;
    top: 50%;
    left: 50%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    background-color: rgb(28, 31, 37);
    color: white;
    padding: 1em;
    z-index: 2;

    -webkit-filter: blur(0);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);

    -webkit-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
}

p {
    font-size: small;
}

input {
    padding: 16px 12px;
    width: 250px;
    border: 0;
    background: #0A0A0A;
    color: #eee;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;

    -webkit-box-shadow: inset 0 0 0 1px #323742;
    -moz-box-shadow: inset 0 0 0 1px #323742;
    box-shadow: inset 0 0 0 1px #323742;
}

#blackout {
    background: rgba(17, 19, 23, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

    Compara este texto
    Y también este texto

P.D. Se agregó -webkit-filter: blur(0) para corregir el texto borroso en Chrome 44 en Windows 7/8.1 desde este post.

4voto

Subodh Sharma Puntos 303

Utilice el archivo OpenType incrustado (EOT) (.eot o .ote formato) de la familia de fuentes que estás utilizando.

3voto

  1. Abre IE Tools y selecciona Opciones de Internet.
  2. Luego ve a Avanzado y desmarca "Usar siempre ClearType para HTML".

1voto

Waqas Ahmed Puntos 141

Me he enfrentado al mismo problema en IE-11 Windows 10, finalmente pude resolverlo reemplazando translate3d(tx, ty, tz) con translate(tx,ty)

Uso antiguo

.show_panel { transform: translate3d(0, 100%, 0); }

Nuevo uso

.show_panel { transform: translate(0, 100%); }

y funcionó para mí, para más detalles: https://github.com/angular/material/issues/4544

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X