firefox rende linee grigie sottili ai bordi della scatola contenuti di un PNG in certi larghezze - perché?

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

Domanda

Quando firefox (3.0.6) rende un'immagine png in certi larghezze (per esempio, 50%), una sottile linea grigia è mostrata lungo i bordi sinistro e superiore della scatola contenuti. La linea scompare in altri larghezze (per esempio, 70%). Inoltre, la linea non sembra essere presente nell'immagine originale (usando gimp per ispezionare l'immagine).

Il fenomeno si verifica in assenza di markup di stile CSS - nell'esempio HTML sottostante, il CSS è presente per chiarire dove si trovano le linee grigie - appare chiaro che le linee grigie appaiono al limite di la casella contenuto stesso.

Ho un momento difficile immaginare questo è un buona fede firefox bug e mi chiedo quale concetto che sto con vista o no afferrare ...

Grazie per il vostro tempo e gli eventuali suggerimenti / pensieri ...

Le immagini possono essere viste qui 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>
È stato utile?

Soluzione

Utilizzando la pagina dimostrativa e l'immagine non ero in grado di vedere nulla di male.

Forse è un problema con i driver video? Credo firefox (e Il Cairo, la libreria grafica che utilizza) sfrutta l'accelerazione hardware per ridimensionare le immagini senza problemi, e purtroppo non è possibile disattivarlo per quanto ne so.

Provare ad accedere attraverso un protocollo remoto per andare in giro la scheda video e check it out. Almeno è possibile ottenere alcuni pace della mente. :)

Altri suggerimenti

Salva le immagini come PNG-24. Ho avuto problemi simili con la distorsione dei pixel quando si cerca di ridimensionare PNG-8 immagini in modo dinamico nel browser.

Inoltre, non sono sicuro se questo funzionerà nella vostra situazione particolare, ma, se possibile, si dovrebbe ridimensionare le immagini prima di essere visualizzati al browser. Basandosi su navigatore ridimensionamento porta a distorsioni e può aumentare l'utilizzo della banda se si sta cercando di visualizzare immagini molto grandi in un formato più piccolo.

Più informazioni: http://graphicssoft.about.com/od/ aboutgraphics / l / blresizehtml.htm

Ho avuto un problema simile con una galleria di immagini che ho lavorato su (spiacente, non collegare come io sono nuovo). Le immagini in miniatura vengono visualizzate dimensioni reali con nessun ridimensionamento html / css in corso.

A volte si guadagnano una vasta linea di 1 pixel a destra e in basso tra il div immagine e lo sfondo ombra. C'è voluto un po 'per capire perché è successo solo qualche volta, ma abbiamo ristretto la scelta per le impostazioni di zoom di Firefox.

Se si esegue lo zoom della pagina in Firefox (ctrl e rotellina del mouse, o ctrl e +/-) poi, proprio come nel tuo caso compaiono a determinati livelli di zoom. Ripristino al 100% di zoom (ctrl e 0) fissato ogni volta per noi, ma non aiuta le persone che utilizzano la funzione di zoom.

Ho avuto un problema simile quando si visualizza un .png-immagine di un div-tag. Una linea sottile, nera è stato reso sul lato dell'immagine. Per risolvere il problema, ho dovuto aggiungere il seguente stile CSS: box-shadow: none;

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top