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 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar.

I had already tested this site in the normal browsers (IE7, Firefox, and Chrome). It looks exactly as I designed it in these. IE8 is FUBARed though. I tried to set IE8 to "IE7" mode but it still looks crappy. IE 8 in IE7 mode obviously isn't rendering the same way as the real IE7. Not even the "IE7 meta tag" works.

Has anyone else had problems like this? I thought IE8 was supposed to be a an improvement, not a step backwards.

P.S. Please excuse the crappy markup on this page. I used IE's "save entire page" feature.

Answer 1

Might want to check this post:

http://stackoverflow.com/questions/662616/background-colour-of-a-png-in-ie8

Answer 2

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.

Answer 3

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 4

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 5

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 6

I'd also like to say a big thanks for this one. Highly embaressing to have gradated pixel tiling. As a front-end developer, when that happened, it wasn't IE that copped the flack... it was me.

So Big Ups for the tip.

Answer 7

Just got the same problem with a 1x1 semi-transparent png ... 10x10 works! I definitely love IE! Thanks for the tip!

Answer 8

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: http://www.jasonferguson.me/transparent-png-background-turns-into-a-gradient-in-ie8/