Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • Imágenes con puntos blancos en Internet Explorer

Imágenes con puntos blancos en Internet Explorer

18 Jul 2011 por Luis

Comentarios: 0

Internet Explorer

Este es uno de esos errores que nos encontramos a veces en Internet Explorer y que pueden hacernos perder horas enteras sólo para encontrar el motivo.

El problema se presenta habitualmente cuando tenemos imágenes que hacemos aparecer o desaparecer con un efecto de fundido (por ejemplo, con los efectos fadeIn() y fadeOut() de jQuery). Cuando lo vemos en cualquier otro navegador, funciona correctamente, pero en Internet Explorer alguna de las imágenes se ve con puntos del color del fondo.

En este caso, el problema que tiene Internet Explorer (versiones anteriores a la 9) está en el filtro propietario filter:alpha(opacity=X) (X será un valor entre 0 y 100), que marca la opacidad de la imagen. Este filtro es el equivalente de Internet Explorer a la propiedad CSS3 opacity: X (X será un valor entre 0.0 y 1.0). Esta es la forma que tiene jQuery (y otros frameworks javascript) de hacer el efecto "fundido".

El filtro, en general, funciona bien; pero tiene un problema con el color #02050a (casi negro), por el cual, trata los píxeles de ese color como transparentes. Por eso aparecen en algunas imágenes "puntos blancos" (en realidad son puntos del color de fondo).

Para que podamos ver el problema, he preparado la siguiente imagen, a la que le he aplicado el filtro filter:alpha(opacity=100):

Lobo aullando a la luna (IE)

Aquellos con otros navegadores veréis un lobo aullando a la luna, pero los que usen Internet Explorer (versiones anteriores a la 9) verán en el lobo las letras IE.

A continuación un pantallazo (aproximado) de lo que ven unos y otros (a la izquierda otros navegadores, a la derecha Internet Explorer):

Lobos aullando a la luna (IE)

Soluciones al problema

Las soluciones a este problema pueden ser dos:

  • Poner el fondo del contenedor de la imagen con color #02050a. Así, aunque los píxeles sean transparentes, al final tendrán su color real. Esta solución puede hacer que las transiciones entre imágenes (en el caso de fundidos) sean más oscuras.
  • Cambiar el color de los píxeles de la imagen por otro muy parecido. Esto se puede hacer de forma sencilla en, por ejemplo, Photoshop yendo a Imagen > Ajustes > Reemplazar color... y eligiendo cambiar #02050a por #02050b (u otro parecido). El cambio será imperceptible e Internet Explorer mostrará la imagen correctamente.

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?