firefox rend fines lignes grises au niveau des bords de la boîte de contenu d'une image PNG à certaines largeurs - pourquoi?

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

Question

Lorsque firefox (3.0.6) rend une image PNG à certaines largeurs (par exemple, 50%), une mince ligne grise est représentée le long des bords gauche et supérieur du bloc de contenu. La ligne disparaît à d'autres largeurs (par exemple, 70%). semble en outre, la ligne ne pas être présent dans l'image originale (en utilisant gimp pour inspecter l'image).

Le phénomène se produit en l'absence du balisage de style CSS - dans l'exemple HTML ci-dessous, le CSS est présent pour clarifier où les lignes grises se trouvent - il semble clair que les lignes grises apparaissent au bord de la zone de contenu lui-même.

J'ai du mal à imaginer c'est un véritable bug firefox et je me demande ce concept que je suis avec vue ou non saisir ...

Merci pour votre temps et des suggestions / pensées ...

Les images peuvent être vues 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>
Était-ce utile?

La solution

En utilisant votre page de démonstration et de l'image je ne pouvais rien voir de mal.

Peut-être est le problème avec les pilotes vidéo? Je crois que Firefox (et caire, la bibliothèque graphique utilise) tire profit de l'accélération matérielle pour redimensionner les images en douceur, et, malheureusement, vous ne pouvez pas le désactiver AFAIK.

Essayez de vous connecter à distance via un protocole pour faire le tour de la carte vidéo et vérifier. Au moins, vous pouvez obtenir une certaine tranquillité d'esprit. :)

Autres conseils

Enregistrer vos images au format PNG-24. J'ai eu des problèmes similaires avec une distorsion de pixels lorsque vous essayez de redimensionner les images PNG-8 dynamiquement dans le navigateur.

En outre, je ne sais pas si cela va fonctionner dans votre situation particulière, mais si possible, vous devez redimensionner les images avant sont affichées dans le navigateur. En se fondant sur le redimensionnement du navigateur conduit à une distorsion et peut augmenter la bande passante utilisée si vous essayez d'afficher des images très grandes dans un format plus petit.

Plus d'informations: http://graphicssoft.about.com/od/ aboutgraphics / l / blresizehtml.htm

J'ai eu un problème similaire avec une galerie d'images que je travaille sur (désolé, ne peut pas lier comme je suis nouveau). Les images miniatures sont affichées taille réelle sans redimensionnement html / css passe.

Parfois, ils gagnent une large ligne de 1 pixel sur la droite et en bas entre le div d'image et l'arrière-plan d'ombre. Il nous a fallu un certain temps pour comprendre pourquoi il ne nous est arrivé parfois, mais rétréci vers le bas aux paramètres de zoom Firefox.

Si vous effectuez un zoom la page dans Firefox (ctrl et mousewheel, ou ctrl et +/-), puis comme dans votre cas, ils apparaissent à certains niveaux de zoom. Remise à zéro à 100% zoom (ctrl et 0) fixé à chaque fois pour nous, mais ne permet pas que les gens qui utilisent la fonction de zoom.

J'ai eu un problème similaire lors de l'affichage d'une image .png dans un div-tag. Une mince ligne noire a été rendue sur le côté de l'image. Pour résoudre ce problème, je devais ajouter le style CSS suivant: box-shadow: none;

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top