jQuery CSS rendering - funziona in Firefox, non in Chrome

Question

Sto usando un cursore jQuery per regolare il padding di un DIV contenente testo di paragrafo. Mentre aumento ugualmente il padding su tutti i lati, dovrebbe forzare i paragrafi racchiusi in una colonna sempre più stretta, al centro della pagina.

Questo funziona in Firefox, ma in Chrome le larghezze dei paragrafi rimangono costanti (vale a dire che non diventano più strette man mano che il pad del DIV si spinge su di esse), quindi spinge il layout a destra.

Ho ricreato il problema qui: jsfiddle.net/ms3Jd. Puoi provarlo in Chrome e Firefox per vedere la differenza.

Qualche idea su come forzare Chrome ad aggiornare i paragrafi allegati?

Answer 1

So che ci sono modi per forzare (o trucco) Chrome per di aggiornamento/ridisegnare/recalcuate gli elementi della pagina, ma non so come fare it. Qualche idea?

Tratto da qui: How can I force WebKit to redraw/repaint to propagate style changes?

sel.style.display='none'; 
sel.offsetHeight; // no need to store this anywhere, the reference is enough 
sel.style.display='block'; 

ho applicato rapidamente qui, ma si dovrebbe fare in una funzione: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

È possibile aggiungere il troppo pieno e galleggiare proprietà:

#preview > div { 
    padding: 5%; 
    overflow: auto; 
    float: left; 
} 

Answer 3

sto usando fadeTo per forzare Chrome per aggiornare.
Non sono sicuro, ma credo che sia l'animato su fadeTo che fa il trucco
provare che la linea sulla jsfiddle.

$('#preview > div').css('padding', ui.value + '%').children('p').fadeTo(1, .99).fadeTo(1, 1);