Odd “shaking” effect when animating width with jQuery (only in Chrome!)

Question

I\'m animating the width of a li element using jQuery in a simple snippet of code. I\'m using hover() as the handler and .animate() to ani

Answer 1

This problem occurred with some divs when I was trying to animate another div within it. What I noticed is that it happens if the div or element has css property display:inline-block. Making the element float would have solved the problem, but inline-block was required in my case.

I noticed that the element had also vertical-align:middle css property. Changing it to vertical-align:text-bottom solved the problem. No more shaking effect in Chrome v23 (may be the bug is still persisting in newer versions).