#7442 closed bug (patchwelcome)
slideDown/slideUp "jump" when surrounding elements are margin collapsing
| Reported by: | matteosistisette | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | effects | Version: | 1.4.4rc |
| Keywords: | 1.8-discuss | Cc: | |
| Blocked by: | Blocking: |
Description (last modified by )
Whenever you use slideDown("slow") on any object, the animation, instead of being smooth, starts with a little jump. With slideUp, the movement starts smoothly, but it ends with a little jump.
This is not a discontinuity in speed or acceleration, this is a discontinuity in the position, so no matter what the speed curve is supposed to be (accelerating, decelerating, ease in, ease out, no ease, uniform speed, whatever) it is plainly wrong.
I'm testing on Mozilla Firefox, it may work properly in other browsers.
You can try it with any minimal test that uses slideUp and slideDown; see for example http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery and click on the "slide in" and "slide out" buttons in "example B"
Change History (31)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
You are right, the example you link to does work properly; however, try this very minimal example: this shows the issue as well
<html> <head> <script type="text/javascript" src="code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><![CDATA[ $(document).ready(function() {
$("#goslidedown").click(function(event) {
$("#slidingblock").slideDown("slow"); event.preventDefault();
}); $("#goslideup").click(function(event) {
$("#slidingblock").slideUp("slow"); event.preventDefault();
});
}); ]]> </script> </head> <body> <p><a href="" id="goslidedown">DOWN</a> | <a href="" id="goslideup">UP</a> <p id="slidingblock">(replace with long text)</p> <p>(replace with long test)</p> </body> </html>
comment:3 Changed 13 years ago by
Strangely enough, my own example works fine in jsFiddle, but if I save it in an HTML file and test it locally, it shows the issue, just as does the example in the link I mentioned.
comment:4 Changed 13 years ago by
So that means that the issue has to do with the fact that jsFiddle does a css reset. I can reproduce with this http://jsfiddle.net/boushley/umNsj/3/. So it has something to do with having ems in your margins.
comment:5 Changed 13 years ago by
And as this fiddle shows it is specific to margin, if you use ems in padding things appear to work just fine.
comment:6 Changed 13 years ago by
Meant to paste a link to this fiddle http://jsfiddle.net/boushley/umNsj/4/
comment:7 Changed 13 years ago by
Great, that narrows down the issue! and also seems to offer a kind of a workaround.
Indeed I was testing it with no CSS at all, so I guess the default values happen to be of the type that trigger the issue.
comment:8 Changed 13 years ago by
So as this fiddle shows http://jsfiddle.net/boushley/umNsj/10/, it has nothing to do with using em. It has to do with having an element nested within a parent that has margin on it.
comment:9 follow-up: 12 Changed 13 years ago by
This is the result of the super-awesome collapsing margins ability of CSS. Love you CSS WG. </3 test demonstrating that this is a margin collapsing problem (WebKit only)
Not sure how much can be done about this…
comment:10 Changed 13 years ago by
| Component: | unfiled → effects |
|---|---|
| Keywords: | needsreview added |
| Milestone: | 1.5 |
| Priority: | undecided → low |
| Status: | new → open |
| Version: | 1.4.3 → 1.4.4rc |
comment:11 Changed 13 years ago by
I don't understand why the priority has been set to low. This is a major issue: this makes sliding effects unusable on some markups.
comment:12 Changed 13 years ago by
Replying to snover:
This is the result of the super-awesome collapsing margins ability of CSS.
More precisely, this is the result of jQuery not taking into account margin collapse.
comment:13 Changed 12 years ago by
| Milestone: | → 1.next |
|---|
comment:14 Changed 12 years ago by
| Keywords: | 1.8-discuss added |
|---|
comment:16 Changed 11 years ago by
+0, If taking into account margin-collapse is possible and doesn't create an insane amount of code or performance issues, go for it. Else, just document the issue.
comment:17 Changed 11 years ago by
| Description: | modified (diff) |
|---|
+0, With jaubourg on this, it's a corner case and margin-collapse is a known phenomenon.
comment:18 Changed 11 years ago by
| Description: | modified (diff) |
|---|
+1, this is reponsible for a good bunch of the animation code in jQuery UI's accordion. Maybe someone can come up with a clever solution with little amounts of code.
comment:19 Changed 11 years ago by
| Description: | modified (diff) |
|---|
+1, I'm for fixing it, could be difficult to solve
comment:21 Changed 11 years ago by
| Owner: | set to gnarf |
|---|---|
| Status: | open → assigned |
I'm gonna take a stab at this one, if you have ideas - please forward em along
comment:22 Changed 11 years ago by
| Keywords: | needsreview removed |
|---|
comment:23 Changed 11 years ago by
| Owner: | gnarf deleted |
|---|---|
| Status: | assigned → open |
I can't think of any good way to solve this issue. The number of ways that margin could be causing this are numerous. Basically you need the previous visible elements margin-bottom (or parent margin-top if no previous visible) margin to determine a negative margin top to animate to instead of zero, and then you'll need the next visible elements margin-top or its parents margin-bottom to determine your negative margin bottom. All that is not going to be a small amount of code... We MIGHT be able to pluginize a fix for it, but I think its going to be too large to fix if this is still considered an odd edge case.
comment:24 Changed 11 years ago by
| Summary: | slideDown and slideUp "jump" at the beginning and end (respectively) → slideDown/slideUp "jump" when surrounding elements define margin |
|---|
comment:25 Changed 11 years ago by
~just thinking out loud here: what if at the end of the animation we set the top border to "1px solid transparent" and the margin-top to "-1px"? Is that a crazy hack?~
Yes, that was a crazy hack that doesn't really work. I'm with gnarf here. This seems very hard to resolve with a small amount of code. Margin collapse is a known phenomenom that isn't always undesired.
I'm changing my vote to -1, because the number of ways margin collapse can happen, both desired and undesired. Also, because of the multiple ways in wish we could even attempt to fix this, someone is inevitable complain we fixed it the wrong way.
I say, if you don't want margin collapse, don't write code that has margin collapse. There doesn't seem to be anythingwe can, nor should, do here.
comment:27 Changed 11 years ago by
| Summary: | slideDown/slideUp "jump" when surrounding elements define margin → slideDown/slideUp "jump" when surrounding elements are margin collapsing |
|---|
comment:28 Changed 11 years ago by
| Resolution: | → patchwelcome |
|---|---|
| Status: | open → closed |
We've looked at this and can't figure a general way to solve it. Collapsing margins are both a blessing and a curse. If you think you have a solution, let us know.
comment:30 Changed 10 years ago by
Simply add an inner div inside the div that slides up/down that contains the margins/borders/padding, makes it slide much smoother.
comment:31 Changed 9 years ago by
The quick fix i could see was to avoid the paddings or margins on the DOM element that is being expanded or collapsed. Instead go to the inner DOM elements and apply a margin to it. So that your UI layout is preserved and also jQuery wont have issues with the paddings or margins of the DOM element being collapsed or expanded.
So not all instances do this. For instance http://jsfiddle.net/boushley/umNsj/ slides without the jump you're describing. So there is clearly something else having some effect here.