The IE 'non-disappearing content' bug
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'.- Set both the container and the rabbit to position: 'absolute' or 'relative'.
- Set the container to display: 'none'.
- Set the rabbit to display: 'none'.
- 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?
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 container <div> happens to be a stack of images. Some of these images should 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, and didn't disappear. Hence, all images of the stack will be seen when tab 2 is chosen...
One may 'break the IE spell' 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: 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:- temporarily switch the content's (=rabbit's) display property to 'block' and back to 'none'.
- temporarily switch the content's (=rabbit's) position property from 'relative' to 'absolute' and back, or vice versa.
- 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...)
- 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#.
