Took me hours to isolate this bug. It appears to be non-deterministic, and very case-specific.

Essentially, calling width(), innerWidth(), height(), or innerHeight() (as getters) on an inline-block element before calling addClass() or removeClass() can interfere with the CSS transition that the addClass() or removeClass() call should be triggering, particularly in WebKit. Try this example in Chrome or Safari:

http://jsfiddle.net/TrevorBurnham/W2Sms/1/

The boxes should be smoothly transitioning, but instead they often jump to the transition's conclusion. Now, this only seems to happen when the element is inline-block and has zero width in one of its two states. (It only requires one element; the 4 are just for show.)

Loading the same example in Firefox 11.0, the issue isn't as obvious, but I sometimes see the block "flicker" to the transition-complete state for a single frame. Again, calling the element's width(), outerWidth(), height(), or outerHeight() method appears to cause this behavior.

This may be a WebKit/Mozilla bug (I haven't tested other browsers), but I thought I'd report it here first. I'm not sure how those dimension methods are affecting the element, though I did notice that they cause $(box).attr('style') to change from undefined to the empty string.