Sleight PNG JS and Crashes

[aaron.martone]

I've been using YoungPup's Sleight Javascript code to force MSIE to render PNG alpha transparency correctly, and have noticed that a 1 in 20-30 refreshes results in a MSIE crash. (If this happens to my clients I CANNOT allow this; I don't want a site with a reputation of crashing my client's browser)

Here is the code, that's for free download; I was hoping someone could look it through and give me thoughts on any code that may be "iffy" Also, can you provide me with a variation that would pause the operation of the script for, say, 1 second, before it runs; I want to see if the fact that it does this too fast is causing some kind of overflow. Thanks

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
window.attachEvent("onload", fnLoadPngs);
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
if (itsAllGood && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="" + src + "", sizingMethod='scale')"
img.src = "x.gif";
}
img.style.visibility = "visible";
}
}

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""+mypng+"", sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
}
}
}
}

[awestmoreland]

It's hard to say what's wrong with the code as it's so difficult to reproduce the error. The 1 second delay however is much easier. Simply use the setTimeout() function as follows:

setTimeout("fnLoadPngs()", 1000);

Andy

[aaron.martone]

Andy.

Have you read through Sleight's code? Is the fnLoadPngs() function the one that would cause problems, or would it be the alphaBackgrounds() function? Where do I place that code? Before or after the functions? I assume since it's not in a function itself, that code would be fired off on each page load. Or would that code alone wait 1 second and then fire off the function once?? (as opposed to a setInterval, if such exists)

[Mr. Brownstone]

Sleight was updated quite recently by Drew McLellan. I don’t know if this will solve your problem — he does not mention the issue — but it might be worth checking out.

Also, is the IE-crash you’ve experienced limited to a particular version?

[aaron.martone]

When I temporarily disable the Sleight JS code, the transparency is gone and I don't crash. (was up for 2 days, no crashes) When I re-enable it I crashed 3 times that day.

I actually tried to use the code you showed me Mr.B, and it DOES take care of CSS' backtround-image when it's a PNG, but it alone ignores inline PNGs that the original Sleight DOES take care of. I placed both into one JS file and they take care of PNGs properly together.

Maybe that's where the error is coming in. Something is getting applied to PNGs twice and causing browser errors. I will contact him and inform him of the issue to see if they can combine the code to go over the PNGs only once AND check for inline and CSS PNGs.