The bug

In Internet Explorer (IE) 6, 7 and 8 in 'Compatibility View' there is a bug when hiding content within a hidden container element. The content will remain visible, even though its 'display' property is 'none', as can be observed when the container is re-shown again.

Try it

Top left is a container element (red square) containing an image (rabbit in hat). Perform the steps below (Note: order matters!) to see the bug, when viewed in IE6, IE7 or IE8 in 'Compatibility View'.

1. Set both the container and the rabbit to position: 'absolute' or 'relative'.
2. Set the container to display: 'none'.
3. Set the rabbit to display: 'none'.
4. Set the container to display: 'block' again.
   On IE6/7/8CompatView, the rabbit will still be visible, even though its display= 'none'! (as can be checked in IE's Web-developer toolbar, see screenshot below). Once more setting the rabbit to display= 'none' doesn't help, the rabbit remains visible.

So what!? Isn't this a quite obscure situation?

Details

The bug occurs in the following situation:

• In IE6, IE7 and IE8 in 'Compatibility View'. Doesn't occur in IE8 in default view, Firefox3, Opera9, Safari3 on Windows, Safari 3 on Mac, Chrome1.
• Both the container and the content need to be positioned non-static, so: absolute or relative.
• The container must be hidden ('display= 'none') before the content is hidden. If the order of hiding is the other way around, the bug does not occur.
• The bug only occurs if the container is hidden after the page has fully loaded.

Work arounds

One may 'release the spell' in a number of ways:

1. temporarily switch the content's (=rabbit's) display property to 'block' and back to 'none'.
2. temporarily switch the content's (=rabbit's) position property from 'relative' to 'absolute' and back, or vice versa.
3. temporarily switch the content's (=rabbit's) visibility property to 'hidden' and back. (But this only works if the content (=rabbit) is positioned absolutely! The wonderful world of IE...)

One may also 'overrule' the incorrectly displayed content by:

• additionally setting the content's (=rabbit's) 'visibility' property to 'hidden'. Courtesy to: Ricardo Tomasi, who brought up this fix in the jQuery discussion group where this issue was first discussed. This workaround however has the drawback of having two properties ('display' and 'visibility') simultaneously hiding the content. To re-show the content, both properties will have to be reset.

This issue was first discussed in: http://groups.google.com/group/jquery-en/browse_thread/thread/429f63dcb679da23#.