scrollHeight in IE7 returns incorrect value unless specifically referenced before used

Question

I have been working on an Accordion class for MooTools that is more catered to what I need, but have noticed that in IE7 (which I still need to support), element.scrollHeight returns an incorrect value unless I specifically reference it before using it. For example, I have an element with the classes "container" and "collapsed" & following styles that is hidden from the page:

.container {
    overflow: hidden;
}

/* removed when made visible */
.collapsed {
    left: -9999em;
    position: absolute;
    top: 0px;
}

When I need to display this element, I remove the class, and calculate its scrollHeight. In most browsers, this works fine. However, in IE7, the following code returns a height that is significantly smaller than the element's actual scrollHeight:

// remove the collapsed class
elem.removeClass('collapsed');

alert(elem.scrollHeight); // consistently '69px' across all accordion folds

However, if I reference elem.scrollHeight first, the alerted scrollHeight is correct:

// remove the collapsed class
elem.removeClass('collapsed');

if (elem.scrollHeight) alert(elem.scrollHeight); // the scrollHeight is correct

Does IE7 just need the additional few milliseconds to properly recalculate the element's scrollHeight, or is there something else at play?

Thank you for your help!

Planometer

Answer 1

See this table.

When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.

And scrollHeight marked as 'incorrect' for ie5-7. Maybe it will work with offsetHeight? Or calculate it somehow from other properties?

Also here mentioned that...

Whatever you do, in IE access the propertys not before body's onload has fired, otherwise you will get weird results.

Barbital