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

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.