IE7 Recalculated Offset Bug

IE7 now has support for dynamic pseudo classes :hover and is commonly used for the purpose of hiding elements from view and bringing them back into view when a ancestor element is hovered over, but the support is buggy depending on the property and values used for either hiding the elements or for bringing them back into view.

Setup:

What we have above is a container element containing an absolutely positioned element. The code will look like this.

<div class="container">Container
	<div class="absolute">Absolutely Positioned Element</div>
</div>

In the below examples, the absolutely positioned element is hidden from view by the normal position value and brought back into view by the hover position value. The first two examples do not work in IE7.

Example 1:

a.p element: normal position left:-999em; - hover position left:auto;

Example 2:

a.p element: normal position left:-999em; - hover position left:0;

The next three examples use a percentage for the normal or hover position of the absolutely positioned element and now the hover will work in IE7.

Example 3:

a.p element: normal position left:-999em; - hover position left:auto; margin-left:0%;

Example 4:

a.p element: normal position left:-999em; - hover position left:0; margin-left:0%;

Example 5:

a.p element: normal position left:-999%; - hover position left:auto;

The next three examples use various other methods and again the hover will work in IE7.

Example 6:

a.p element: normal position left:-999em; - hover position left:auto; border:5px solid green;

Example 7:

a.p element: normal position left:-999em; - hover position left:auto; list-style:none;

Example 8:

container: hover state background:#FDF;

a.p element: normal position left:-999em; - hover position left:auto;

From these test it can be established that when using a value in ems to hide the absolutely positioned element, neither left:0; or left:auto; will bring the absolutely positioned elements back into view, unless additional values are given for the hover. However if a percentage is used in either hiding or bringing back into view the absolutely positioned element, then the bug is not present.

It is often mentioned that left:auto; does not work in IE6 when it is using javascript to mimic the hover, but really it was using left:-999em; in conjunction with left:auto; that was the problem. If a percentage is use for either of the values, then IE6 does work.

Please see the article Sticky Sons of Suckerfish for an intriguing look at the effects of the IE7 recalculated offset bug.