What's going on?!?

This is an EXTREMELY serious bug in IE7. How has this been allowed to slip through the cracks?

Description: If you have an HTML div layer that is specified as hidden visibility, when the layer visibility is changed to "visible," forms and images on that layer do not render. The correct amount of space is consumed on the screen (as though the images and/or forms rendered properly), but you will be staring at blank space. Swapping layer visibility has been well supported since at least IE5 (probably before that).

Example: This is a simple HTML form that has a Yes/No selection. When "Yes" is selected, more options are made available.

Form element in the "No" state.

When you switch to the "Yes" state in IE7, here's what you get:

How do we know this is an IE bug? I mean, couldn't it be something wrong with the code?

First of all, this code has been working on IE (and Netscape and Firefox and Safari...) for at least a couple of years. OK, that doesn't prove it's a bug - we could have used some strange hack, right? Wrong! Take a look at how IE7's thumbnail view of browser tabs renders the page:

Notice the form elements inside of the grey box? Apparently, the thumbnail viewer knows how to render the page, but the IE browser does not!

Amazing!

It gets better...

When you return to the page from the thumbnail view, the form is rendered correctly:

Now for some more fun, when you change the selection to "No" to hide the div layer, but return to the "Yes" option, it is again rendered incorrectly:

Once you have done this, there is no way to recover from the "incorrectly rendered" state (going to the thumbnail view and back does not display the form).

We have checked profusely to make sure there isn't a problem with our code. To provide a very simple example of this bug, here is some code that will toggle the visibility of a layer with an image in it:

The CSS:

.closed_div
{
   visibility: hidden;
   position: absolute;
}

.link
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color:#000099;
   cursor: pointer;
}

The HTML:

<tr>
  <td>
    <a class="link" onClick="swapLayer( 'swap_layer' );">Clicking here will swap visibility of the div contents</a><br/>
    <div class="closed_div" id="swap_layer">
      <img src="images/some_image.jpg">HELLO
    </div>
  </td>
</tr>

The javascript:

function swapLayer( layer_name )
{
   var layer = getListElemRefs( layer_name );
   if( layer.css != null )
   {
     if( layer.css.visibility == 'visible' )
     {
       layer.css.visibility = 'hidden';
       layer.css.position = 'absolute';
     }
     else
     {
       layer.css.visibility = 'visible';
       layer.css.position = 'relative';
     }
   }
}
 
function getListElemRefs( id )
{
  var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getListLyrRef(id,document): null;
  if (el) el.css = (el.style)? el.style: el;
  return el;
}

Click here to run the example (opens in a new window or tab)

In IE7, this exhibits the same behavior as is described above - the layer opens when the link is clicked, but the image does not appear. The word "HELLO" DOES appear, so we know that the layer swapping code is working as desired. Furthermore, the image renders correctly in the browser tab thumbnail view. If you have IE7, try the example:

1. click the link above
2. open a new browser tab
3. go back to the page with the example
4. click the link to open the div layer
5. notice the empty space
6. go to the browser tab thumbnail preview page
7. notice the image in place
8. go back to the browser tab
9. notice the image in place as it should have been
10. click the link to toggle visibility as many times as you want - the image will not display except in the thumbnail view.

As you can see, this code contains no hacks or non-standard tricks. All of this code is well-documented, standards-compliant, and has worked for at least several years in all major browsers (tested in IE5, IE6, Netscape, Firefox, Safari, Opera). We provided this example because it is short and can be examined very quickly and easily to verify that we haven't done anything unusual.

We can achieve the desired results in IE7 by doing this:

The HTML (remove the 'class' declaration from the div layer to prevent it from being hidden and remove the image):

<tr>
  <td>
    <a class="link" onClick="swapLayer( 'swap_layer' );">Clicking here will swap visibility of the div contents</a><br/>
    <div id="swap_layer"></div>
  </td>
</tr>  

The javascript swapLayer function (change the innerHTML property of the layer instead of swapping layer visibility):

function swapLayer( layer_name )
{

  var layer = getListElemRefs( layer_name );
  var layer_text = layer.innerHTML;

  if( layer.css != null )
  {
    if( layer_text.search( /HELLO/ ) == -1 )
    {
      layer.innerHTML = '<img src="images/some_image.jpg">HELLO';
    }
    else
    {
      layer.innerHTML = '';
    }
  }
}
  

Click here to run the example (opens in a new window or tab)

At best this is a horrible hack. It requires that we test for a condition other than the layer visibility to determine whether or not the contents are shown or hidden.

We have tested this on three different computers, including one that was a formatted hard drive, clean installation of XP Pro SP2, all Windows Updates and then straight to the examples.

We firmly reject the notion that we (or anyone else) should have to implement a work-around for something that is as simple and has been as standardized as what we presented.

1. The form and/or image that does not appear still uses the same amount of space on the screen as when it would be visible.
2. The form and/or image displays as desired in the browser tab thumbnail view.
3. The code has been part of W3C standards for quite some time.
4. The code is not terribly complicated and does not make use of any hacks or work-arounds.
5. The code has worked as desired on at least 2 previous major version releases of the browser.
6. The code works with ALL other major browsers.

All that we ask in this case is that the browser know how to render pages at least as well as its built-in thumbnail viewer.

Our plea to the web development community: How do we spread the word about this VERY serious bug in a loud enough voice that it "moves" Microsoft to fix the problem?

A discussion has been started here:
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.internetexplorer.general

A direct link to the appropriate thread is here:
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.internetexplorer.general&tid=ccc000ce-38c6-4106-8407-6f9635aa8d10&cat=en_us_28cca3eb-7037-4d4f-bde1-d8efee1f1420&lang=en&cr=us&sloc=en-us&m=1&p=1

Send questions or comments to: wtcms@spawnordie.com

UPDATE 2007-01-23: We have discovered that this bug is only present when you change both the layer visibility AND the layer position. This is an absolutely essential need. Here is an example where we can swap visibility without position (works in IE7):
Click here to run the example (opens in a new window or tab)

Unfortunately, getting the text to appear under the open div layer is absolutely essential for many web-based applications (think of an expandable and collapsible list that must appear in the middle of a form). Here is the same example with changing div layer position to show that it still doesn't work in IE7:
Click here to run the example (opens in a new window or tab)

As we've stated above: We are open to suggestions, but we cannot find any way that someone can make a case for this being anything other than a bug in IE7.

Swapping div layer visibility and position has not only been part of the CSS standard for a significant period of time, it has been supported by IE since (at least) version 5.

When you look at the difference in rendering between the thumbnail view and the main browser window, it is unquestionably obvious that the intention of MS was to have the page render as the coder would expect and as it has worked in previous versions of IE.

UPDATE 2007-04-18: We have found a work-around that is acceptable. The problem appears to occur when one swaps both layer visibility and layer position. Either one works independently as expected. Our "somewhat" accecptable solution is a method by which layer visibility is swapped, but the difference in the poisition attribute is simulated by adjusting the containing layer's height. Here is an example (works in IE7):
Click here to run the example (opens in a new window or tab)

Regardless of the existence of an "acceptable" work-around, there is no question that this is a bug. This method has worked in IE5 and 6. IE7's built-in thumbnail viewer knows how to render these pages, for gosh-golly's sake! It's now late November, 2007 and I've come back to review this information. MS has had almost an entire year to make the browser be able to render web pages at least as well as its thumbnail viewer! Wow! Hello? Anybody home? Anybody care? Oh, I didn't think so.

Today is: September 7^th, 2008

As of today, this bug has existed in the RELEASED, NON-BETA version of IE7 for 1 year and 325 days!