Side navigation
#7442 closed bug (patchwelcome)
Opened November 08, 2010 09:09PM UTC
Closed July 25, 2012 12:46AM UTC
Last modified April 15, 2014 05:32PM UTC
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
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"
Attachments (0)
Change History (31)
Changed November 08, 2010 09:20PM UTC by comment:1
Changed November 08, 2010 09:27PM UTC by comment:2
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>
Changed November 08, 2010 09:32PM UTC by comment:3
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.
Changed November 08, 2010 09:37PM UTC by comment:4
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.
Changed November 08, 2010 09:39PM UTC by comment:5
And as this fiddle shows it is specific to margin, if you use ems in padding things appear to work just fine.
Changed November 08, 2010 09:39PM UTC by comment:6
Meant to paste a link to this fiddle http://jsfiddle.net/boushley/umNsj/4/
Changed November 08, 2010 09:54PM UTC by comment:7
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.
Changed November 08, 2010 11:08PM UTC by comment:8
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.
Changed November 09, 2010 01:21AM UTC by comment:9
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…
Changed November 09, 2010 01:22AM UTC by comment:10
| component: | unfiled → effects |
|---|---|
| keywords: | → needsreview |
| milestone: | 1.5 |
| priority: | undecided → low |
| status: | new → open |
| version: | 1.4.3 → 1.4.4rc |
Changed November 09, 2010 09:27AM UTC by comment:11
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.
Changed November 09, 2010 09:40AM UTC by comment:12
Replying to [comment:9 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.
Changed April 17, 2011 08:29PM UTC by comment:13
| milestone: | → 1.next |
|---|
Changed November 22, 2011 08:30PM UTC by comment:14
| keywords: | needsreview → needsreview 1.8-discuss |
|---|
Changed December 13, 2011 01:27PM UTC by comment:15
| description: | 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" → 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" |
|---|
+1
Changed December 13, 2011 03:53PM UTC by comment:16
+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.
Changed December 13, 2011 05:06PM UTC by comment:17
| description: | 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" → 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" |
|---|
+0, With jaubourg on this, it's a corner case and margin-collapse is a known phenomenon.
Changed December 13, 2011 05:32PM UTC by comment:18
| description: | 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" → 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" |
|---|
+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.
Changed December 14, 2011 03:58PM UTC by comment:19
| description: | 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" → 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" |
|---|
+1, I'm for fixing it, could be difficult to solve
Changed December 19, 2011 05:09PM UTC by comment:20
+0, I'm with jaubourg and dmethvin here
Changed January 09, 2012 05:47PM UTC by comment:21
| owner: | → gnarf |
|---|---|
| status: | open → assigned |
I'm gonna take a stab at this one, if you have ideas - please forward em along
Changed February 29, 2012 03:45AM UTC by comment:22
| keywords: | needsreview 1.8-discuss → 1.8-discuss |
|---|
Changed May 12, 2012 07:21AM UTC by comment:23
| owner: | gnarf |
|---|---|
| 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.
Changed May 12, 2012 07:21AM UTC by comment:24
| summary: | slideDown and slideUp "jump" at the beginning and end (respectively) → slideDown/slideUp "jump" when surrounding elements define margin |
|---|
Changed June 14, 2012 12:46PM UTC by comment:25
| _comment0: | 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? → 1339715038903986 |
|---|
~~~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.
Changed June 14, 2012 11:05PM UTC by comment:26
-1
Changed June 14, 2012 11:06PM UTC by comment:27
| summary: | slideDown/slideUp "jump" when surrounding elements define margin → slideDown/slideUp "jump" when surrounding elements are margin collapsing |
|---|
Changed July 25, 2012 12:46AM UTC by comment:28
| 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.
Changed January 17, 2013 11:27PM UTC by comment:29
But what about http://jsfiddle.net/vol7ron/Pbz3Z/
Changed July 18, 2013 10:04AM UTC by comment:30
Simply add an inner div inside the div that slides up/down that contains the margins/borders/padding, makes it slide much smoother.
Changed April 15, 2014 05:32PM UTC by comment:31
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.