Skip to main content

Bug Tracker

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 boushley comment:1

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.

Changed November 08, 2010 09:27PM UTC by matteosistisette 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 matteosistisette 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 boushley 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 boushley 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 boushley comment:6

Meant to paste a link to this fiddle http://jsfiddle.net/boushley/umNsj/4/

Changed November 08, 2010 09:54PM UTC by matteosistisette 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 boushley 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 snover 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 snover comment:10

component: unfiledeffects
keywords: → needsreview
milestone: 1.5
priority: undecidedlow
status: newopen
version: 1.4.31.4.4rc

Changed November 09, 2010 09:27AM UTC by matteosistisette 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 matteosistisette 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 timmywil comment:13

milestone: → 1.next

Changed November 22, 2011 08:30PM UTC by ajpiano comment:14

keywords: needsreviewneedsreview 1.8-discuss

Changed December 13, 2011 01:27PM UTC by mikesherov 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 jaubourg 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 dmethvin 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 jzaefferer 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 timmywil 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 rwaldron comment:20

+0, I'm with jaubourg and dmethvin here

Changed January 09, 2012 05:47PM UTC by gnarf comment:21

owner: → gnarf
status: openassigned

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 mikesherov comment:22

keywords: needsreview 1.8-discuss1.8-discuss

Changed May 12, 2012 07:21AM UTC by gnarf comment:23

owner: gnarf
status: assignedopen

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 gnarf 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 mikesherov 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 mikesherov comment:26

-1

Changed June 14, 2012 11:06PM UTC by mikesherov comment:27

summary: slideDown/slideUp "jump" when surrounding elements define marginslideDown/slideUp "jump" when surrounding elements are margin collapsing

Changed July 25, 2012 12:46AM UTC by dmethvin comment:28

resolution: → patchwelcome
status: openclosed

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 vol7ron.forum@gmail.com comment:29

Changed July 18, 2013 10:04AM UTC by sander.ravenhorst@gmail.com 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.

http://jsfiddle.net/ggjgp/1/

Changed April 15, 2014 05:32PM UTC by aackose@gmail.com 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.