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

I was looking to this issue as well and this: -webkit-backface-visibility: hidden; solve my problem. I add this odd shaking while using CSS3 transform on a SVG.

More info can be found here: CSS3 transform rotate causing 1px shift in Chrome

Hope it helps

Answer 2

Had similar issue with shaking SVGs when there's a CSS transition applied to parent tag. I tried to apply everything I could randomly, and this fix finally helped:

svg {
  transform: translate3d(0, 0, 0);
}

Answer 3

This seems to be a bug in Chrome version 21.0.1180.60 and may also be present in other versions. Nothing wrong with the code here and I guess we just leave it up to workarounds or submitting a bug report now.

Sigh.

Answer 4

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).

Answer 5

I changed your css: ul.nav li a, adding float: right to it and that fix the shake.

Anyway if it helps, I had the same problem when animating height of a div within another div with height:auto. Changing the height to a fix width solved it.

Hope it helps.