Absolute position child elements work incorrectly with "slide" effects

jQuery - v1.8.0 (also tested on v1.7.2)

jQuery UI - v1.8.23(also tested on v1.8.21)

tested and occurs in Chrome, Firefox, IE, Safari, Safari iOS

Windows 7 and iOS 5.1.1

To Reproduce:

have a container div with 2 divs inside:

<div id="container">

<div id="box1"></div>

<div id="box2"></div>

</div>

set up the css like this:

#container{position:absolute;}

#box1{

position:absolute;

width:100px;

height:100px;

background-color:#000000;

}

#box2{

position:relative;

width:100px;

height:100px;

margin:20px;

background-color:rgba(0, 200, 0, 0.5);

}

(The main thing is that one box is set to position:relative while the other is set to position:absolute, and that the relative one has a margin set to something other then 0.)

Then animate the container with a slide, for example:

$("#container").show( "slide", {direction:"down"}, 500 );

Description:

you would expect this to animate both boxes smoothly.

the relative box animates correctly, but the absolute positioned box appears to be offset downward a distance equal to the margin of the relative box, while the slide is occurring. Then it jumps to the correct position when the slide is finished.

if both boxes are set to absolute, the slide does not occur at all, and nothing is visible until the duration of the animation is complete.

Strangely if you apply a border to the container div, everything animates correctly.

It looks like the container div is re sized and positioned to wrap directly around the children elements during the slide, but ignores absolute positioned children elements, this causes the positioning to be off for these elements, or causes them to get cut off if they are outside the area that the div is changed to. having a border seems to stop this re size, perhaps it would be best for it to always act like it does when the animated element has a border?