The IE 'non-disappearing content' bug

Document directory

• The bug
• Try it
• So what !? Isn' t this a quite obscure situation?
• Details
• Work arounds

The bug

In Internet Explorer (IE) 6, 7 and 8 in 'compatibility view' there is a bug whenHiding 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: 'abort' 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/8 compatview, 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?

The bug may be encountered in real life in a situation as shown top right (actually, this was how I ran in to it ). there is a set of tabbed pages. each tabbed page keeps its content in a separate container <div>. if Tab 1 is selected, container <Div 1> is shown (Hence, the other container <div> S are hidden), If Tab 2 is selected, container <Div 2> is shown, etc.

Initially Tab 1 is selected. hence, tab's 2 Container <div> is hidden (display = 'None '). now for the problem: Inside tab's 2 iner <div> happens to be a stack of images. some of these images shoshould be initially hidden. in this example it's a series of images of a model, supposedly at different ages. initially, all images but the '10 year old'-one are hidden,So when you switch to Tab 2 for the first time, you should only see the '10 year old' picture.

This is were IE's bug shows up: as container <Div 2> was set to display = 'none ', the images contained within this <div> were 'immune 'for the property 'display = none' imposed on them, andDidn't disappear. Hence,All images of the stack will be seenWhen Tab 2 is chosen...

One may 'break the IE spel' by clicking the (+) button seven times. basically, this resets all the 'immunized' images to 'display = Block' (work-around Nr 1 mentioned below ). thereafter, the hiding of the images will work correctly again.

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:AbsoluteOrRelative.
• The container must be hidden ('display = 'None ')BeforeThe 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 hiddenAfterThe page has fully loaded.

Work arounds

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

1. Temporarily switch the content's (= Rabbit's)DisplayProperty to 'block' and back to 'None '.
2. Temporarily switch the content's (= Rabbit's)PositionProperty from 'relative 'to 'absolute' and back, or vice versa.
3. Temporarily switch the content's (= Rabbit's)VisibilityProperty to 'ddden '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:

• Additionally setting the content's (= Rabbit's) 'visibility 'Property to 'ddd '. 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 havingTwoProperties ('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.