Ticket #8505 (assigned bug)

Opened 2 years ago

Last modified 2 months ago

Absolute position child elements work incorrectly with "slide" effects

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

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

comment:1 Changed 2 years ago by scott.gonzalez

  • Owner set to camurai
  • Status changed from new to pending
  • Component changed from ui.core to effects.* (individual effect)

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 2 years ago by camurai

  • Status changed from pending to new

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

comment:3 Changed 2 years ago by scott.gonzalez

  • Status changed from new to open

comment:4 follow-up: ↓ 5 Changed 2 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 2 years ago by bernhardsirlinger (previous) (diff)

comment:5 in reply to: ↑ 4 Changed 2 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 23 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:7 Changed 19 months ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:8 Changed 17 months ago by mikesherov

  • Owner changed from camurai to mikesherov
  • Status changed from open to assigned
  • Milestone changed from none to 1.11.0

comment:9 Changed 2 months ago by scott.gonzalez

  • Milestone changed from 1.11.0 to none
Note: See TracTickets for help on using tickets.