SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Memory Problem in IE with Transparent DIV

    javascript
    Code:
    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
    Code:
    #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
    Code:
    <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.

  2. #2
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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
    Code:
    #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.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What IE version are you using? I'm using 7, and it works fine here.

  4. #4
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wysiwyg View Post
    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.

  5. #5
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hamstu View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •