jQuery - IE8 - fadeIn() / fadeOut() pixel shifting

Question

I'm replacing one absolutely positioned dictionary term with another like so:

jQuery('#replaceme').fadeOut(150, function() { jQuery('#withme').fadeIn(150); });

It's pretty simple code that looks and works great in all browsers except IE8. In IE8, while fadeOut() is doing its thing, the entire text block shifts up 2-3 pixels, and then back down 2-3 pixels upon fadeIn().

Any ideas on what may be causing this? Anybody know a way to prevent this from happening?

BTW: I get the same results with jQuery 1.3.1 as I do with 1.3.2. All of my strict XHTML and CSS validate.

Answer 1

is it changing from an inline element to an inline-block or block element?

using the ie8 developer tools, try changing the display property of the element to display:inline-block and see if the problem occurs then.

edit: response to comments

what's likely happening is the element is being taken out of the expected document flow (appended to body, or a new parent is insert and this is appended to that, etc..) and the css rules that would normally apply do not in this case.

use firebug to identify all of the css rules applying to this element, then try adding this element id, #replaceme, to the list of selectors to guarantee that element is getting styled the way you expect. e.g.

dt > dd.def { }

becomes

dt > dd.def, #replaceme { }