2009-02-11 2 views
3

Lorsque firefox (3.0.6) restitue une image png à certaines largeurs (par exemple, 50%), une fine ligne grise est affichée le long des bords gauche et supérieur de la boîte de contenu. La ligne disparaît à d'autres largeurs (par exemple, 70%). De plus, la ligne ne semble pas être présente 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 sont situées - il semble clair que les lignes grises apparaissent au bord même de la boîte de contenu elle-même.firefoxs rend les lignes grises minces aux bords de la boîte de contenu d'un png à certaines largeurs - pourquoi?

J'ai du mal à imaginer c'est un véritable bug Firefox et 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 herehttp://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> 
+0

Je ne vois pas cela lorsque vous regardez votre image originale. Cela ressemble à un rapport/une question de bug pour les forums de support mozilla, et pas à une question de programmation. –

+0

Aucun de vos liens d'image ne fonctionne.Je finis à une page qui dit "Vous ne pouvez pas faire ça d'ici". Pare-feu ou quelque chose? – sblundy

+0

Recharger l'image une fois que vous arrivez à la page - c'est une chose hotlinking. –

Répondre

0

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

Peut-être que c'est un problème avec les pilotes vidéo? Je crois que firefox (et cairo, la librairie graphique qu'il utilise) profite 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 via un protocole distant pour faire le tour de la carte vidéo et l'extraire. Au moins, vous pouvez avoir une certaine tranquillité d'esprit. :)

+0

Les lignes grises apparaissent quand elles sont passées en revue dans un tunnel vers une boîte de sparc. Cependant, des commentaires à ce jour, il semble que ce n'est pas une question stupide-muet à l'incompréhension HTML ou CSS ... donc probablement pas vraiment un élément de débordement de pile ... – dat

+0

Il est un problème de pilote vidéo: https: // bugzilla. mozilla.org/show_bug.cgi?id=490997 – dat

+0

Hé, c'était sympa de te souvenir. :) –

1

Enregistrez vos images au format PNG-24. J'ai eu des problèmes similaires avec la distorsion des pixels en essayant de redimensionner dynamiquement les images PNG-8 dans le navigateur.

En outre, je ne suis pas sûr que cela fonctionnera dans votre situation particulière, mais si possible, vous devriez redimensionner les images avant qu'elles ne soient affichées au navigateur. S'appuyer sur le redimensionnement du navigateur entraîne une distorsion et peut augmenter l'utilisation de la bande passante si vous essayez d'afficher de très grandes images dans un format plus petit.

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

+0

---------------- ----- Je vois toujours le même effet (ligne grise apparaissant à 50% de sa largeur, mais absent lorsque l'image est rendu à une largeur supérieure telle que 80%) à la fois avec ce que de la format PNG32 'appels ImageMagick et avec quels appels ImageMagick 'PNG24'. – dat

1

J'ai eu un problème similaire avec une galerie d'images sur laquelle j'ai travaillé (désolé, je ne peux pas créer de lien car je suis nouveau). Les images miniatures sont affichées en taille réelle sans redimensionnement html/css en cours.

Parfois, ils gagnent une ligne de 1 pixel de large à droite et en bas entre la div image et l'arrière-plan de l'ombre portée. Il nous a fallu du temps pour comprendre pourquoi cela ne se produisait que de temps en temps mais nous l'avons réduit aux paramètres de zoom de Firefox.

Si vous zoomez sur la page dans Firefox (ctrl et mousewheel, ou ctrl et +/-) alors comme dans votre cas, ils apparaissent à certains niveaux de zoom. La réinitialisation à 100% du zoom (ctrl et 0) le fixe à chaque fois pour nous mais n'aide pas les personnes qui utilisent la fonction de zoom.

0

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

Questions connexes