IE8's rendering of transparent pngs is FUBARed on my site

Question

I just downloaded the IE8 full release so I could test a site I just created. [Example Deleted]

Focus on the left sidebar background image. It is suppose to be a 1x1 se

Answer 1

The problem was my original png was 1×1, and for whatever reason IE8 was not liking trying to tile that and handle the alpha transparency at the same time. When I accidentally saved that image with a much larger copy I had on my clipboard, 100×100, it ended up fixing whatever problem Internet Explorer was having with processing the png’s transparency.

Source

Answer 2

Thanks for the help on this issue -- what a weird bug.

I was also experiencing the issue on 50% of the computers running IE8 (had access to quite a few machines). When I had a 1x1px semi-transparent png set as a background image on a div with CSS, IE would render this as a funky vertical, transparent gradient.

Changing the source image to a 5x5px png of the same opacity fixed the bug... go IE!

Answer 3

I had a similar issue with a site I'm building. The issue only occurred on 50% of the machines with ie8 it was tested on, I was building it for an IT firm so had access to lots of computers. We were able to "fix" the problem by toggling Hardware Acceleration on the problem machines, not that thats really a fix at all.

Answer 4

I fixed the bug and it isn't the gamma issue that is mentioned in that other post. My issue was being caused by the fact that the image is 1x1 pixel in size. I just changed it to 1x2 and it fixed the problem. Weird

[edit] Just saw Guffa's post after i asked this. See his for answer.

Answer 5

It may be a rendering error in IE8, or perhaps it's some function to smooth the edges of repeated images that gives you an unexpected result. Either way it's not very surprising that you get problems using such a small image. Do you realize that the browser has to draw the image 190152 times to render the page?

I am using a 10x10 semi transparent png as background for a div in a page, and it renders just fine in IE8.