firefox torna linhas cinzas finas nas bordas da caixa de conteúdo de um png em certas larguras - por quê?

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

Pergunta

Quando firefox (3.0.6) processa uma imagem PNG em certas larguras (por exemplo, 50%), uma linha de cinza fina é mostrado ao longo do lado esquerdo e as bordas superiores da caixa de conteúdo. A linha desaparece em outras larguras (por exemplo, 70%). Além disso, a linha não parecem estar presentes na imagem original (usando o GIMP para inspecionar a imagem).

O fenômeno ocorre na ausência da marcação de estilo CSS - no exemplo HTML abaixo, o CSS está presente para esclarecer onde as linhas cinzentas estão localizados - parece claro que as linhas cinzentas estão aparecendo bem na borda de a própria caixa de conteúdo.

Eu tenho um tempo difícil imaginar este é um bona fide firefox bug e estou querendo saber o conceito que eu estou com vista ou não agarrar ...

Obrigado pelo seu tempo e qualquer sugestões / pensamentos ...

As imagens podem ser vistas aqui 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>
Foi útil?

Solução

Usando sua página de demonstração e imagem que eu não era capaz de ver nada de errado.

Talvez seja problema com drivers de vídeo? Eu acredito que o Firefox (e Cairo, a biblioteca gráfica que utiliza) tira proveito de aceleração de hardware para redimensionar imagens sem problemas, e, infelizmente, você não pode desativá-lo AFAIK.

Tente fazer o login através de um protocolo remoto para ir ao redor da placa de vídeo e confira. Pelo menos você pode obter alguma paz de espírito. :)

Outras dicas

Save as suas imagens como PNG-24. Eu tive problemas semelhantes com distorção de pixels ao tentar redimensionar PNG-8 dinamicamente no navegador.

Além disso, eu não tenho certeza se isso vai funcionar na sua situação particular, mas se possível, você deve redimensionar as imagens antes que eles são exibidos para o navegador. Baseando-se no navegador redimensionamento leva a distorção e pode aumentar o uso da largura de banda, se você está tentando exibir imagens muito grandes em um formato menor.

Mais informações: http://graphicssoft.about.com/od/ aboutgraphics / l / blresizehtml.htm

Eu tive um problema semelhante com uma galeria de imagens que eu tenho trabalhado em (desculpe, não pode ligar como eu sou novo). As imagens em miniatura são exibidas tamanho real sem html / css redimensionamento em curso.

Às vezes, eles ganham uma ampla linha de 1 pixel na direita e inferior entre o div imagem eo fundo de sombra. Demorou um tempo para trabalhar fora porque isso só aconteceu por vezes, mas reduzi-lo às definições de zoom do Firefox.

Se você ampliar a página no Firefox (ctrl e mousewheel, ou ctrl e +/-), em seguida, assim como no seu caso eles aparecem em determinados níveis de zoom. Redefinição para zoom de 100% (ctrl e 0) fixa-lo cada vez para nós, mas não ajuda as pessoas que usam o recurso de zoom.

Eu tive um problema semelhante ao exibir uma imagem de .png em um div-tag. Uma linha fina, preto foi processado no lado da imagem. Para corrigi-lo, eu tive que adicionar o seguinte estilo CSS: box-shadow: none;

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top