Twitter Bootstrap 100% height accordion "jump"

Question

I'm trying to implement a 100% height accordion using the Twitter Bootstrap collapse component, exactly as described in this question.

I'm manually setting the heights of the .accordion-inner elements as described in this answer.

However I'm experiencing "bouncy" behaviour when expanding/collapsing the panels. I have removed all padding/margin/border from the .accordion-inner elements to eliminate that possibility.

It is most noticeable in IE10, however the problem is also evident in Chrome.

See this example.

Any ideas what is causing this "jumpy" behaviour?

Answer 1

Late to the party, but:

I had a similar problem, and noticed that if I removed a margin-top from the element below the collapsing one, and replaced it with padding-top, the transition was smooth.

So - check for margins on adjacent elements, and try replacing them with padding, if possible.