Chrome/Webkit problema inline-block aggiornamento

Question

Il problema che ho trovato è il seguente:

Situazione: Ho div complessiva che ha un display inline-block. Al suo interno ci sono due elementi che hanno anche uno schermo inline-block.

Quindi aggiungo (grazie a JavaScript) uno <br/> tra i due elementi. Il secondo passa alla riga successiva, che è il comportamento normale.

Parte Buggy: Il <br/> viene quindi rimosso (JavaScript di nuovo) e ... il display non cambia. Sembra che la casella del div complessivo non venga ricalcolata. Alla fine ho due markup simili che non appaiono allo stesso modo (che è un po 'problematico, non è vero).

Funziona perfettamente su Firefox (sembra che sia basato sul webkit poiché il browser Android si comporta allo stesso modo). Quindi la mia domanda è, c'è una soluzione che non usa metodi che alterano il DOM? La libreria utilizzata è jQuery.

Un test case here.

EDIT: Come suggerito da duri, ho compilato una segnalazione di bug in WebKit Bugzilla, è here. Ma io sono ancora alla ricerca di una soluzione ;)

Answer 1

Way cosa ho trovato: rimuovere tutte le Childs da DIV complessiva, e quindi aggiungere tutti tranne BR:

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/

altra variante:

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

Answer 2

Come soluzione, è possibile impostare lo stile su display: block quando lo si desidera su singole righe e ripristinare inline-block quando vuoi che siano amici.

Ho creato un JS Fiddle example

che dimostra questa correzione:

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

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

Answer 3

Questo bug esiste ancora, quindi ecco un'altra soluzione: http://jsfiddle.net/4yj7U/19/

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

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

Questo rende Chrome ri-renderizzare il si estende e li visualizza correttamente.