Chrome/Webkit inline-block refresh problem

The problem I found is the following:

Situation: I have overall div that has a inline-block display. Inside it are two element that have an inline-block display as well.

Then I add (thanks to JavaScript) a <br/> between the two elements. The second goes to the next line, which is the normal behavior.

Buggy part: The <br/> is then removed (JavaScript again) and... the display doesn't change. It appears that the box of the overall div is not recalculated. In the end I have two similar markup that doesn't appear the same way (which is a bit problematic, isn't it).

It 开发者_JS百科works fine on Firefox (it appears to be webkit based as the Android browser behave the same way). So my question is, is there a workaround that doesn't use methods that will alter the DOM? The library used is jQuery.

A test case here.

EDIT: As suggested by duri, I filled a bug report in webkit bugzilla, it's here. But I'm still looking for a workaround ;)

Way what I found: remove all childs from overall DIV, and then append all except BR's:

function removeBr(){
    var ahah=document.getElementById("ahah");
    var childs=[],child;
    while(child=ahah.firstChild) {
        if(!child.tagName||child.tagName.toLowerCase()!=='br')
            childs.push(child);
        ahah.removeChild(child);
    }
    for(var i=0;i<childs.length;i++)
        ahah.appendChild(childs[i]);
}

http://jsfiddle.net/4yj7U/4/

Other variant:

function removeBr(){
    var node=$("#ahah")[0];
    node.style.display='inline';
    $("#ahah").children("br").remove(); 
    setTimeout(function(){node.style.display='';},0);
}

As a work around, you could set the style to display: block when you want them on individual lines and revert to inline-block when you want them to be friends.

I have created a JS Fiddle example

Which demonstrates this fix:

function addBr(){
    $('span').css({ display: 'block'});
}
function removeBr(){
    $('span').css({ display: 'inline-block'});
}

$("#add").click(addBr);
$("#remove").click(removeBr);

This bug still exists, so here's another workaround: http://jsfiddle.net/4yj7U/19/

$("span").css('display', 'none');

setTimeout(function(){
    $('span').css('display', 'inline-block');
}, 0);

This makes Chrome re-render the spans and displays them properly.