jQuery slideDown Snap Back Issue

Question

I have the same problem that I am reading about all over the web, although I can't find the solution.

Simply put, when using the slideDown() method on my DIV elements, I get that ugly snap back effect where jQuery slides the DIV size down too far and then it snaps back to the actual size in an ugly way.

Looking over the web, iv tried removing all margins and padding from the offending elements, but it does nothing.

I cant set static sizes for the div's because each one will change on page load. One loaded though they wont change. (new divs are also created using ajax)

Heres a sample DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

and the CSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

Can anyone help me here? Im out of ideas .. Iv tried using jQuery to figure out the height of the DIV first then force the height using CSS() before calling the slideDown() but jQuery was almost always wrong about the height ...

The response div is also hidden using the display:none property.

This function is then being called on it

function quickResponse(time, user, message, epoch) {
    $('.latestStar').remove();
    addResponse(time, user, message, epoch);
        $('.new').slideDown(500).removeClass('hidden');
    $('html, body').animate({ scrollTop: '0px'}, 1000, function() {
    });     
}

Edit I forgot to mention, that if the div only contains 1 word, the snap back effect doesnt happen .. but if I type multiple words with spaces, it happens..

Its almost like adding spaces causes the height to screw up.

Aluminothermy

Answer 1

Have a look on fixes:
1. SlideDown Animation Jump Revisited
2. Fixing jQuery's slideDown() jump effect

Also that same glitch documented (with fix) on jQuery website: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

And try to add following code before your code (on document onload):

$('.new').css('height', $('.new').height());
$('.new').hide();

This way you will set height explicitly, and be sure to display your div initially, the above code will hide it later, because I think it will fail to set right height to hidden div, though you can try. Good Luck~

Ric

Iv tried both of those ... still no love. Its very annoying .. If I enter "lorem" as the text, its 45px high. if I enter "lorem ipsom" as the text, its 65px high. Iv got no idea why – Aluminothermy

Thanks for this ... that actually helped stop the snapping ... except the heights are still wrong ... some heights are upto 20 px more than others ... simply just by having spaces in the sentence ... I cant figure it out :( – Aluminothermy

strangely.. this is only happening on Chrome aswell .. beleive it or not, IE7 handles it fine – Aluminothermy

Wait. . i fixed it, your code above worked :) It was being given a hidden class from elsewhere .... Thank you for your help :) – Aluminothermy

just a note to help anyone in my shoes - ie7 kept animating to the right height but then the bottom border of my div would jump back to halfway. going through each elem and setting its height using .height() worked a treat. – Vicariate

none of this works. JQuery is the dumbest thing to hit crappy developers since as2. – Ellaelladine

Answer 2

I was having the snap-back-on-slide-down problem on an LI item I was adding to a UL. There was nothing fancy about it so I was finding it puzzling (and had seen this before, but didn't remember how I'd fixed it then).

In my case, the only fix I needed was do specify a width on my LI and was able to slideDown() and slideUp() smoothly.

e.g.

ul li { width: 100%; }

I got this tip from one of the links posted by @arman-p (which suggests adding a width to the element can fix this problem, which it did in my case).

Dotterel

Answer 3

Add css overflow: hidden to the element you want to slide down.

For some reason this fixed my snap-back problem.

EDIT: Things that confuse jquery about the height of an element will cause the snap-back issue.

1. Padding will cause it. Put your padded content you want to slide down in a new parent div without padding, and instead slide that parent div down.
2. Inline text that wraps due to width will cause it. Add white-space: pre or white-space: nowrap to solve it.

Rumery

this worked for me too! after trying all the above ideas first – Diacritical

Answer 4

I was also getting that ugly snap back effect.

What fixed the snap back issue for me was to apply a css width to the div you are applying the slide function to.

Desma

Answer 5

Another thing that could cause this is if you have a "transition" style on the element itself.

An example of what was happening to me

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}

Voussoir

Answer 6

Any of the solutions above didn't work for. I fixed the problem by adding the following styles to my container:

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}

Halbeib

Answer 7

Adding the CSS clear: both solved the problem for me, no idea why though.

Edit: Adding overflow: hidden gave me a blank container with the unwanted additional height.

Menarche

Answer 8

I have a database loading images that are all set to the same width but some of them have different heights and was having a problem with this. What fixed it for me was just throwing a setTimeout around the slideDown portion of my code.

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);

Parchment