Ticket #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: | |
| Blocking: | Blocked by: |
Description (last modified by timmywil) (diff)
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
comment:2 Changed 3 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 3 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 3 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 3 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 3 years ago by boushley
Meant to paste a link to this fiddle http://jsfiddle.net/boushley/umNsj/4/
comment:7 Changed 3 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 3 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 follow-up: ↓ 12 Changed 3 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 3 years ago by snover
- Status changed from new to open
- Component changed from unfiled to effects
- Priority changed from undecided to low
- Version changed from 1.4.3 to 1.4.4rc
- Milestone 1.5 deleted
- Keywords needsreview added
comment:11 Changed 3 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 3 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:16 Changed 17 months 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 17 months 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 17 months 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 17 months ago by timmywil
- Description modified (diff)
+1, I'm for fixing it, could be difficult to solve
comment:20 Changed 17 months ago by rwaldron
+0, I'm with jaubourg and dmethvin here
comment:21 Changed 17 months ago by gnarf
- Owner set to gnarf
- Status changed from open to assigned
I'm gonna take a stab at this one, if you have ideas - please forward em along
comment:23 Changed 12 months ago by gnarf
- Owner gnarf deleted
- Status changed from assigned to 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 12 months ago by gnarf
- Summary changed from slideDown and slideUp "jump" at the beginning and end (respectively) to slideDown/slideUp "jump" when surrounding elements define margin
comment:25 Changed 11 months 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.
comment:26 Changed 11 months ago by mikesherov
-1
comment:27 Changed 11 months ago by mikesherov
- Summary changed from slideDown/slideUp "jump" when surrounding elements define margin to slideDown/slideUp "jump" when surrounding elements are margin collapsing
comment:28 Changed 10 months ago by dmethvin
- Status changed from open to closed
- Resolution set to patchwelcome
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 4 months ago by vol7ron.forum@…
But what about http://jsfiddle.net/vol7ron/Pbz3Z/
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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.