Firefox hace finas líneas grises en los bordes de la caja de contenido de un png en determinados anchos - ¿por qué?

StackOverflow https://stackoverflow.com/questions/538082

Pregunta

Cuando Firefox (3.0.6) hace que una imagen png en ciertas anchuras (por ejemplo, 50%), una línea gris delgada se muestra a lo largo de los bordes izquierdo y superiores de la caja de contenido. La línea desaparece en otras anchuras (por ejemplo, 70%). Además, la línea no parecen estar presentes en la imagen original (usando gimp para inspeccionar la imagen).

El fenómeno se produce en ausencia del marcado estilo CSS - en el ejemplo de HTML, el CSS está presente para aclarar donde se encuentran las líneas grises - parece claro que las líneas grises están apareciendo en el mismo borde de el cuadro contenido en sí mismo.

Tengo un tiempo difícil imaginar que este es un bona fide firefox error y me pregunto qué concepto estoy pasando por alto o no agarrar ...

Gracias por su tiempo y cualquier sugerencia / pensamientos ...

Las imágenes se pueden ver aquí http: / /datlisp.blogspot.com/2009/02/img-width-tag-and-firefox-rendering-of.html

HTML: 

<html>
<head><title>problems with pngs</title></head>
<body>
<div style="border-color: red; border-width: thin; border-style: solid;
      padding: 2px">
<img src="http://imagebin.ca/img/ato4dM.png"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
    padding: 2px;"/>    
</div>
</body></html>
¿Fue útil?

Solución

Uso de la página de demostración y la imagen que no era capaz de ver nada malo.

Tal vez sea un problema con los controladores de vídeo? Creo que Firefox (y El Cairo, la biblioteca de gráficos que utiliza) se aprovecha de la aceleración de hardware para cambiar el tamaño de imágenes sin problemas, y por desgracia no se puede desactivarlo yo sepa.

Trate de conectarse a través de un protocolo de control remoto para ir alrededor de la tarjeta de vídeo y comprobar que funciona. Al menos se puede conseguir un poco de tranquilidad. :)

Otros consejos

Guardar imágenes como PNG-24. He tenido problemas similares con la distorsión de píxeles cuando se trata de cambiar el tamaño PNG-8 de forma dinámica en el navegador.

Además, no estoy seguro de si esto va a funcionar en su situación particular, pero si es posible, debería cambiar el tamaño de las imágenes antes de que sean exhibidas al navegador. Basándose en el cambio de tamaño del navegador puede provocar distorsión y puede aumentar el ancho de banda si usted está tratando de mostrar imágenes de gran tamaño en un formato más pequeño.

Más información: http://graphicssoft.about.com/od/ aboutgraphics / l / blresizehtml.htm

He tenido un problema similar con una galería de imágenes que he estado trabajando en (lo siento, no se puede vincular como soy nuevo). Las imágenes en miniatura se muestran tamaño real sin modificar el tamaño de HTML / CSS pasando.

A veces obtienen una línea de 1 píxel de la derecha y abajo entre el div imagen y el fondo de sombra paralela. Nos tomó un tiempo para averiguar por qué sólo ocurrió a veces, pero que reducido a la configuración de zoom de Firefox.

Si se acerca la página en Firefox (ctrl y la rueda del ratón, o Ctrl y +/-) a continuación, al igual que en el caso en que aparecen en determinados niveles de zoom. Reposición a 100% de zoom (Ctrl y 0) fija cada vez para nosotros, pero no ayuda a las personas que utilizan la función de zoom.

Yo tenía un problema similar cuando se visualiza una imagen PNG en una etiqueta div. Una línea delgada negro se hizo en el lado de la imagen. Para solucionarlo, he tenido que añadir el siguiente estilo CSS: box-shadow: none;

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top