IE7 crashes when hiding textarea or parent container

Question

I have a form that checks to see if another window is opened. If so, it copies the values of two input fields to existing readonly input fields and hides two editable textareas by setting the element.style.display = "none". If the other window is not opened, the readonly input fields are hidden.

My issue is that when I set the textareas' style.display = "none", IE7 (use mandated by corporate IT policy) hangs as if it were stuck in an infinite loop. The functionality works fine in Firefox, and raises no errors in Firebug. IE7 hangs if I try to set the display for the textarea, the table row it is contained in, or the containing div. I've tried to hide multiple other elements on my page, but it only happens on each textarea.

The bizarre part is that I have another form that is almost identical except for the form it opens, and the code works there. I'm stumped.

HTML:

<table>
   <tr>
   <td class="first"><span>Source of CAPA</span></td>
   <td><span>Tracking Number(s)</span></td>
   </tr>
   <tr id="Normal">
   <td class="first"><textarea id="txtCAPASource" title="Source of CAPA" rows="3" cols="50" onfocus="highlight(this.id);" onblur="imposeMaxLength(this, 1990, event); unhighlight(this.id);" onkeyup="imposeMaxLength(this, 1990, event); adjustTextarea(this, 3);"></textarea></td>
   <td><textarea id="txtCAPATrack" title="Tracking Number" rows="1" cols="25" onfocus="highlight(this.id);" onblur="imposeMaxLength(this, 1990, event); unhighlight(this.id);" onkeyup="imposeMaxLength(this, 1990, event); adjustTextarea(this, 1);"></textarea></td>
   </tr>
   <tr id="Launched">
   <td class="first"><input type="text" id="txtLaunchedCAPASource" title="Launched Source" size="63" maxlength="63" readonly="readonly" class="grayed" /></td>
   <td><input type="text" id="txtLaunchedCAPATrack" title="Launched Tracking Number" size="30" maxlength="30" readonly="readonly" class="grayed" /></td>
   </tr>
   </table><br /><br />

Javascript:

    function hide(elementID)
    {
     var element = document.getElementById(elementID);
     element.style.display = "none";
    }

 function Startup()
 {
 if (stepnumber == "1" && document.getElementById("mastercontrol.route.esig.sigstatus.step1").value == "")
 {
  var opener = window.open("","VendQualSum");
  if (opener.document.getElementsByTagName("title")[0] != undefined && opener.document.getElementsByTagName("title")[0].innerHTML == "Vendor Qualification Summary")
  {
   document.getElementById("txtLaunchedCAPASource").value = opener.document.getElementById("txtVendor").value + " " + String.fromCharCode(8212) + " Number: " + opener.document.getElementById("txtVendorEvalNum").value;
   document.getElementById("txtLaunchedCAPATrack").value = opener.document.getElementById("mastercontrol.form.number").value;
   opener.document.getElementById("txtIntCAPANum").value = document.getElementById("mastercontrol.form.number").value;
            opener = "";
   hide("txtCAPASource");
   hide("txtCAPATrack");
  }
  else
  {
   opener.close();
   hide("txtLaunchedCAPASource");
   hide("txtLaunchedCAPATrack");
  }
 }
 else if(document.getElementById("txtLaunchedCAPASource").value != "")
 {
  hide("txtCAPASource");
  hide("txtCAPATrack");
 }
 else
 {
  hide("txtLaunchedCAPASource");
  hide("txtLaunchedCAPATrack");
 }
 }

Answer 1

Figured out my problem. I was calling a function to adjust the sizes of all the textareas on the page (shown below). Apparently IE doesn't like doing that on hidden textareas and just hung in an infinite loop. Solution was to move the function above the code in question.

function adjustTextarea(txtArea, minRows)
{
    while (txtArea.rows > minRows && txtArea.scrollHeight < txtArea.offsetHeight)
    {
        txtArea.rows--;
    }

    while (txtArea.scrollHeight > txtArea.offsetHeight)
    {
        txtArea.rows++;
    }
}