IE9 crashes when hiding DIVs

NOTE: Sorry, I don't yet have code to support this article (sensitive production code only). I will attempt to provide a concise working sample if time permits later. I wanted to publish this in the hopes it can offer hints to others in tracking down similar issues.

Using

• Internet Explorer 9.
• jQuery 1.9.2 and 2.0.0.
• HTML5 doctype

Scenario

• I have a page split into logical "screens".
• Each screen is a DIV identified by class names (e.g. "formScreen", "errorScreen", "confirmationScreen").
• ".formScreen"'s contain form (data input) fields, and the whole page has single submit button which generates a JSON package from the form data and performs an AJAX post-back.
• I fill in the form "in a certain way" (the order in which I fill in the form seems to make a difference), then submit.
• After a response is received by the submit, the code updates the display.

The Problem

Hiding all "formScreen" DIVs after submitting causes IE9 to completely crash.

Originally I define a formScreens variable:

var formScreens = $(".formScreens");

then later call:

$(formScreens).hide();  

which causes IE to crash.

I also tried the following, and both options also cause the crash:

var copyOfFormScreens = $("div.formScreen");

$(copyOfFormScreens).each(function ()  
{  
    $(this).hide();                   // Option 2: This fails too. 
    $(this).css("display", "none");   // Option 3: This fails too.  
});

IE crash error

The following was returned by IE when crashing:

Problem signature:
  Problem Event Name:   APPCRASH
  Application Name: IEXPLORE.EXE
  Application Version:  9.0.8112.16496
  Application Timestamp:    51a55c6d
  Fault Module Name:    MSHTML.dll
  Fault Module Version: 9.0.8112.16496
  Fault Module Timestamp:   51a55ff0
  Exception Code:   c00000fd
  Exception Offset: 0032ef01
  OS Version:   6.1.7601.2.1.0.256.48
  Locale ID:    3081
  Additional Information 1: 39a4
  Additional Information 2: 39a4d7f18c1c7c725934453009d2f1b9
  Additional Information 3: ddcf
  Additional Information 4: ddcfafd1b35f05f847ac8d3e7a7bcf12

And the following when debugging in Visual Studio:

Unhandled exception at 0x6302EF01 (mshtml.dll) in iexplore.exe: 0xC00000FD: Stack overflow (parameters: 0x00000001, 0x02432F68).  
Unhandled exception at 0x630A172B (mshtml.dll) in iexplore.exe: 0xC0000005: Access violation writing location 0x02430FFC.   // This error continued to show when pressing the debug "continue".

Workaround/Solution

There is a very simple workaround I discovered.

Before hiding the desired elements I set the focus to an element "outside" the DIVs that are hidden (i.e. an element that is still visible after the screen DIVs are hidden). In my case, I set the focus to the first container DIV in the page, which turns out to be an ancestor for DIVs being hidden.

An idea of how the DIV layout looks:

<div class="mainContent">  
  <div class="fromScreen">
  </div>
  <div class="fromScreen">  
  </div>  
  <div class="fromScreen">  
  </div>  
</div>

So the code I now call is:

$(".mainContent").trigger("focus");  // Call this before the hide.
formScreens.hide();             // Crashes on submit if focus is not set to higher element first.

Key takeaway

If hiding a DIV with elements that have focus prior to hiding causes issues, move the focus to an element outside the DIV being hidden.

(My workaround was inspired by the first response at http://www.3dvia.com/forums/topic/urgent-crash-in-internet-explorer-when-trying-to-hide-the-experience)