Bug Tracker

Opened 8 years ago

Closed 6 years ago

Last modified 5 years ago

#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 timmywil)

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 8 years ago by boushley

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.

comment:2 Changed 8 years ago by matteosistisette

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 8 years ago by matteosistisette

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 8 years ago by boushley

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 8 years ago by boushley

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 8 years ago by boushley

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

comment:7 Changed 8 years ago by matteosistisette

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 8 years ago by boushley

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 Changed 8 years ago by snover

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 8 years ago by snover

Component: unfiledeffects
Keywords: needsreview added
Milestone: 1.5
Priority: undecidedlow
Status: newopen
Version: 1.4.31.4.4rc

comment:11 Changed 8 years ago by matteosistisette

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 in reply to:  9 Changed 8 years ago by matteosistisette

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 8 years ago by timmywil

Milestone: 1.next

comment:14 Changed 7 years ago by ajpiano

Keywords: 1.8-discuss added

comment:15 Changed 7 years ago by mikesherov

Description: modified (diff)

+1

comment:16 Changed 7 years ago by jaubourg

+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 7 years ago by dmethvin

Description: modified (diff)

+0, With jaubourg on this, it's a corner case and margin-collapse is a known phenomenon.

comment:18 Changed 7 years ago by jzaefferer

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 7 years ago by timmywil

Description: modified (diff)

+1, I'm for fixing it, could be difficult to solve

comment:20 Changed 7 years ago by Rick Waldron

+0, I'm with jaubourg and dmethvin here

comment:21 Changed 7 years ago by gnarf

Owner: set to gnarf
Status: openassigned

I'm gonna take a stab at this one, if you have ideas - please forward em along

comment:22 Changed 7 years ago by mikesherov

Keywords: needsreview removed

comment:23 Changed 7 years ago by gnarf

Owner: gnarf deleted
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.

comment:24 Changed 7 years ago by gnarf

Summary: slideDown and slideUp "jump" at the beginning and end (respectively)slideDown/slideUp "jump" when surrounding elements define margin

comment:25 Changed 7 years ago by mikesherov

~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.

Last edited 7 years ago by mikesherov (previous) (diff)

comment:26 Changed 7 years ago by mikesherov

-1

comment:27 Changed 7 years ago by mikesherov

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

comment:28 Changed 6 years ago by dmethvin

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.

comment:29 Changed 6 years ago by vol7ron.forum@…

comment:30 Changed 5 years ago by sander.ravenhorst@…

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/

comment:31 Changed 5 years ago by aackose@…

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.

Note: See TracTickets for help on using tickets.