Memory Problem in IE with Transparent DIV

[NokX]

javascript

function msgBox() {
    var cover = document.createElement("div");
    cover.setAttribute("id", "message-cover");  // give the <div> an ID
    cover.onclick = function() { killMsgBox(); };  // add onclick event to hide <div>
    document.body.appendChild(cover);  // append element to DOM
}

function killMsgBox() {
    var element = document.getElementById("message-cover");
    element.detachEvent("onclick", killMsgBox);  // get rid of onclick event
    element.parentNode.removeChild(element);  // remove element from DOM
}

css

#message-cover {
    background-color: rgb(0, 0, 0);
    opacity: .5;
    filter: alpha(opacity=50); /* for IE */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

html

<button type="button" onclick="msgBox();">Message Box</button>

every time i click to create the msgBox() about 9MB of memory is piled onto IE. at first, i thought it might be the contents inside the <div> weren't being destroyed properly, but when i set up the function to just display the <div> by itself - i got the same issue.

any ideas on what can be done, if anything, in IE to fix this problem? typically this wouldn't be an issue, but my users are going to be opening up these transparent boxes often and the memory will add up quick.

[NokX]

alrighty - apparently IE has a memory issue with it's own filter: alpha(opacity=50); style because i decided to try a PNG set to 50% for the cover instead and i received no memory increase.

javascript

function msgBox(subject, message, type) {
    /*** TRANSPARENT COVER ***/
    var cover = document.createElement("img");
    cover.setAttribute("id", "message-cover");
    cover.setAttribute("src", "cover.png");
    document.body.appendChild(cover);
}

css

#message-cover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

the only problem with using a PNG is that IE didn't support the alpha channels in PNGs until IE 7. i'm going to try another IE filter in a bit to see if that creates a memory issue.

[wysiwyg]

What IE version are you using? I'm using 7, and it works fine here.

[NokX]

ok, i just tried IE's AlphaImageLoader filter and it jacked-up the memory, as well...

filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="cover.png", sizingMethod="scale");

so it looks like the filter in CSS is the culprit in IE.

[NokX]

What IE version are you using? I'm using 7, and it works fine here.

i'm using IE 7, as well.

and which script did you use? the first one that uses a transparent <div> or the second one where i tried a PNG?

both work perfect for me. it's not the functionality that's lacking - it's the memory that's being consumed by using the filter style in CSS for IE that's the problem.



when i use the PNG for a cover - works fine, no memory issues.

when i use the <div> with the IE CSS filter - works fine, but major memory issues.

[hamstu]

I'm seeing the leak in my IE7 (and IE6)

This article may be helpful: http://www.codeproject.com/jscript/leakpatterns.asp

As well as this leak detection program, http://www.outofhanwell.com/ieleak/i...itle=Main_Page

[NokX]

I'm seeing the leak in my IE7 (and IE6)

This article may be helpful: http://www.codeproject.com/jscript/leakpatterns.asp

As well as this leak detection program, http://www.outofhanwell.com/ieleak/i...itle=Main_Page

i appreciate the response. i've read that codeproject.com article before thinking that maybe i wasn't clearing out the elements properly, but after this latest test of just displaying a simple <div> with a style attached i've found out that it's the filter style in CSS for IE that's causing the memory pile-up.

i just need to find a way to clear that out somehow, if possible.