Trouble with using jQuery remove() on elements that are inline-block

Question

I have a horizontal line of div elements that are display:inline-block and top aligned.

I can add elements, and the line expands. When I remove elements by animating the width to 0, the line doesn't retain it's single line appearance, but rather forces a second line to temporarily appear during the animation.

The behavior is the same in IE, Webkit and Firefox.

I could change the interface to avoid the problem, but I still would like to know what causes it, and how to fix it if possible.

Here's a scaled-down example of the issue.

body {
    text-align: center;
}
#container {
    height: 20px;
    border: 1px dashed #AAA;
    background: #EEE;
    margin: 0 auto;
    display:table !important;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.item {
    cursor: pointer;
    width: 50px;
    height: 18px;
    border: 1px solid purple;
    vertical-align: top;
    display: inline-block;
    color: white;
    vertical-align: top;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.outer {
    background: orange;
}


$('#add').click(function() {
    $(this).before('<div class="item"></div>')
});

$('#add').click().click().click()

$('.item:not(.outer)').live('click', function() { 
    $(this).animate({width: 1, paddingLeft: 0}, 1000, function() {$(this).remove()}); 
});

<div id="container"><div class='item outer'></div><div id="add" class="item outer">Add</div></div>

Answer 1

Maybe it is related to the fact that jquery has to convert it to a block element when animating its width? This other question might shed some light

Answer 2

Well, here's my solution if anyone is interested.

I ended up modifying jQuery's source just a little, and it seems to work well. Then I slipped the changes into the minified version with the necessary tweaks.

Here's what I did (for the non-minified):

In jQuery's animate: function, in the if() statement that checks for 'height' and 'width', I added the following:

// Detect inline-block standard, pre ie8 fix, and pre Firefox 3 fix
opt.ibCheck =(jQuery.css(this,'display') === 'inline-block') || 
            (jQuery.css(this,'zoom') !== 'normal' && jQuery.css(this,'display') === 'inline') || 
            (jQuery.css(this,'display') === '-moz-inline-stack');

Then in jQuery.fx.prototype.update:, in the if() statement that checks for 'height', 'width' and 'this.element.style', I changed that if() statement to the following:

if ( ( this.prop === "height" || this.prop === "width" ) && this.elem.style && !this.options.ibCheck ) {

...checking for the ibCheck property that was set in 'animate'.

Everything seems to work well. It checks for inline-block, the common pre-Firefox 3 fix or the pre-ie8 fix. If one is found, it sets ibCheck to 'true'. The update() function will not change the display to 'block' if ibCheck is 'true'.

There could be a better check for IE. I suppose if someone animates an 'inline' element, with 'zoom' set to anything besides 'normal', it may cause problems? As for me, I didn't know that IE even accepted a 'zoom' attribute until yesterday!