Slide jumps when first child element has a top margin

[stijn.herreman@…]

When the first child element of the element being slided, has a top margin, a jump occurs.

Affected browsers:

• IE 9
• FF 7
• Chrome 15

Test case at  http://jsbin.com/onuyij

[timmywil]

This does not seem to be an issue in the latest version of jQuery.  http://jsfiddle.net/timmywil/Ph7pG/

[stijn.herreman@…]

It is not reproducible on jsfiddle. See  http://jsbin.com/ajuwap/edit#source for a test case with the latest version of jQuery, so please reopen.

[ryanneufeld]

By disabling the normalize css on jsifddle you can reproduce the bug.

see here:  http://jsfiddle.net/ryanneufeld/Ph7pG/4/

What appears to be happening is that the children of the section being animated are losing the margin top, and once it's finished the style is being removed.

[timmywil]

That makes sense. When animating width and height, there really is no way around setting overflow to hidden. When css is not normalized, this means that the elements may appear to have jumps in margin. This is due to the fact that setting overflow to hidden will remove  margin collapsing. There are many ways to fix the issue and remove the jumps. One is to use normalized css, which removes all unnecessary margins as well as any margin collapsing. Or, the elements can be floated:  http://jsfiddle.net/timmywil/Ph7pG/7/