Solving CSS PNG Fix Background “none” Call
Some time ago I wrote an article about CSS PNG Fix for IE by Rogie King, from Komodo Media, which is a great fix. But whether you realized it or not, there are some issues with the script if you monitor it closely, and some observant people have also notified me about it.
The problem is it will make repeated background ‘none’ call to your server, which probably shown as page not found or server error message in your access log, though the transparency fix stilll works. And here are some possible scenarios that may trigger that problem:
<img>tag linking to other image types other than PNG, e.g. JPEG or GIF images. This can be quite problematic if you use css selector to automatically fix all* html imgtags found, you may get a lot of redundant background ‘none’ calls to your server if there are many tags which link to GIF or JPEG images.- If you accidentally put
'png'class name from some your elements without stylesheet background image.
So I took closer look at the code, re-formatted so I knew what was going on. There two types of fixes, one for <img> tag, while the other for background images. And it seems background image fix are still called for some of the scenarios above, and calling this.runtimeStyle.backgroundImage="none" was triggering the “none” request to the server. And two fixes that I did:
- If it is
<img>tag and it does not link to a PNG image file, do not perform background image fix, instead just ignore it. - If it is a background image fix, and the background image is not a PNG file, ignore it as well.
Here are the updated codes:
* html img,
* html .png {
azimuth: expression(
this.pngSet?
this.pngSet=true :
(this.nodeName == "IMG" ?
(this.src.toLowerCase().indexOf('.png')>-1 ?
(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/images/blank.gif") :
'') :
(this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
(this.origBg = (this.origBg) ?
this.origBg :
this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none") :
''
), this.pngSet=true
);
}
