Admitted, it’s not breaking news that Microsoft Internet Explorer has had his issues displaying PNGs. I wasted another hour on fixing an IE bug just recently and stumbled across a phenomenon I’d like to share – it might spare somebody a lot of time.
In my example, I filled some <DIV>-tags with a background-image PNG file containing a 1×1 pixels black with an opacity of 60%. The background-image was set to be tiled via CSS and all Safari, Opera, Firefox 2, 3 and 3.5 displayed it correctly. Internet Explorer 8 on the other hand was on his funky company manners and showed some fancy gradients:
#title_bg{
background:transparent url('../imgs/title_bg_62.png');
width:200px;
height:60px;
}
How comes? Well, looking at the problem from Internet Explorer’s point of angle, simple Math leads us to the solution. Our PNG measures 1 by 1 pixels, let’s say our <DIV> is 200×100. Having the background-image being set to be tiled, IE has to calculate 1 x 1 x 200 x 100 = 20.000 pixels (It doesn’t shock me at all IE turns out to be the only browser incapable of handling such an operation).
The workaround is pretty simple: releave your browser of three quarters of the calculation tasks by raising the PNG size to 2×2 pixels.
Jake & Dan