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.
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.
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.
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...)
One may also 'overrule' the incorrectly displayed content by:
This issue was first discussed in: http://groups.google.com/group/jquery-en/browse_thread/thread/429f63dcb679da23#.
Updated last: April 19th, 2009.