Absolute position child elements work incorrectly with "slide" effects

[camurai]

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?

[Scott González]

While the animation doesn't look at smooth as it should, I'm not seeing the two boxes being offset the way you describe: ​http://jsfiddle.net/QkNeC/

[camurai]

the container div needs to be set to position:absolute as well. ​http://jsfiddle.net/L7nD4/1/

[bernhardsirlinger]

In your example you assigned a margin of 20px to the div2.
When you change margin: 20px to

margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;

and leave out the margin-top it works properly.

[camurai]

Replying to bernhardsirlinger:

In your example you assigned a margin of 20px to the div2.
When you change margin: 20px to

margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;

and leave out the margin-top it works properly.

So then the specific problem seems to be that the top margin of that div is not being applied during the animation, but is still being used to calculate the finish position of the animation, so the two boxes animate as if there is no top margin set to the second one, but stop at a point that would allow for the magin. Then snap to being displayed regularly with the top margin applied.

[mikesherov]

This is fixed by the effects rewrite.

[Mike Sherov]

Effects: Rewrite

1. Introduces a set of helper methods to easily create and define new effects.
2. Uses clip animations and placeholders instead of wrappers for clip effects.
3. Ensures all animations are detectable as animated

Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041

Closes gh-1017

Changeset: b6bec797d6a8ef0b377a866c38c67e66a626b45f