Opened 11 years ago

Closed 8 years ago

#8505 closed bug (fixed)

Absolute position child elements work incorrectly with "slide" effects

Reported by: camurai Owned by: mikesherov
Priority: minor Milestone: 1.12.0
Component: ui.effects.* (individual effect) Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:

Description

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?

Change History (11)

comment:1 Changed 11 years ago by Scott González

Component: ui.coreeffects.* (individual effect)
Owner: set to camurai
Status: newpending

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/

comment:2 Changed 11 years ago by camurai

Status: pendingnew

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

comment:3 Changed 11 years ago by Scott González

Status: newopen

comment:4 Changed 11 years ago by 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.

Last edited 11 years ago by bernhardsirlinger (previous) (diff)

comment:5 in reply to:  4 Changed 11 years ago by 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.

comment:6 Changed 11 years ago by Scott González

Milestone: 1.9.01.10.0

comment:7 Changed 10 years ago by tj.vantoll

Milestone: 1.10.0none

comment:8 Changed 10 years ago by mikesherov

Milestone: none1.11.0
Owner: changed from camurai to mikesherov
Status: openassigned

comment:9 Changed 9 years ago by Scott González

Milestone: 1.11.0none

comment:10 Changed 9 years ago by mikesherov

Milestone: none1.12.0

This is fixed by the effects rewrite.

comment:11 Changed 8 years ago by Mike Sherov

Resolution: fixed
Status: assignedclosed

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

Note: See TracTickets for help on using tickets.