Bug Tracker

Opened 9 years ago

Last modified 5 years ago

#7442 closed bug

slideDown and slideUp "jump" at the beginning and end (respectively) — at Version 18

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 jzaefferer)

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 (18)

comment:1 Changed 9 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 9 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 9 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 9 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 9 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 9 years ago by boushley

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

comment:7 Changed 9 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 9 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 9 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 9 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 9 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 9 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 8 years ago by ajpiano

Keywords: 1.8-discuss added

comment:15 Changed 8 years ago by mikesherov

Description: modified (diff)

+1

comment:16 Changed 8 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 8 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 8 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.

Note: See TracTickets for help on using tickets.