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
Component: | ui.core → effects.* (individual effect) |
---|---|
Owner: | set to camurai |
Status: | new → pending |
comment:2 Changed 11 years ago by
Status: | pending → new |
---|
the container div needs to be set to position:absolute as well. http://jsfiddle.net/L7nD4/1/
comment:3 Changed 11 years ago by
Status: | new → open |
---|
comment:4 follow-up: 5 Changed 11 years ago by
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.
comment:5 Changed 11 years ago by
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
Milestone: | 1.9.0 → 1.10.0 |
---|
comment:7 Changed 10 years ago by
Milestone: | 1.10.0 → none |
---|
comment:8 Changed 10 years ago by
Milestone: | none → 1.11.0 |
---|---|
Owner: | changed from camurai to mikesherov |
Status: | open → assigned |
comment:9 Changed 9 years ago by
Milestone: | 1.11.0 → none |
---|
comment:11 Changed 8 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Effects: Rewrite
- Introduces a set of helper methods to easily create and define new effects.
- Uses clip animations and placeholders instead of wrappers for clip effects.
- 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
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/