Skip to main content

Search and Top Navigation

#8505 closed bug (fixed)

Opened August 17, 2012 08:39PM UTC

Closed December 10, 2014 10:00PM UTC

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?

Attachments (0)
Change History (11)

Changed August 17, 2012 08:46PM UTC by scottgonzalez comment:1

component: ui.coreeffects.* (individual effect)
owner: → 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/

Changed August 17, 2012 09:02PM UTC by camurai comment:2

status: pendingnew

the container div needs to be set to position:absolute as well.

http://jsfiddle.net/L7nD4/1/

Changed August 17, 2012 09:06PM UTC by scottgonzalez comment:3

status: newopen

Changed September 10, 2012 08:01AM UTC by bernhardsirlinger comment:4

_comment0: 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.1347264160459970

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.

Changed September 10, 2012 03:51PM UTC by camurai comment:5

Replying to [comment:4 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.

Changed October 11, 2012 02:42PM UTC by scottgonzalez comment:6

milestone: 1.9.01.10.0

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:7

milestone: 1.10.0none

Changed April 16, 2013 12:28PM UTC by mikesherov comment:8

milestone: none1.11.0
owner: camuraimikesherov
status: openassigned

Changed June 24, 2014 11:54PM UTC by scottgonzalez comment:9

milestone: 1.11.0none

Changed November 18, 2014 05:18PM UTC by mikesherov comment:10

milestone: none1.12.0

This is fixed by the effects rewrite.

Changed December 10, 2014 10:00PM UTC by Mike Sherov comment:11

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