jQuery CSS rendering - funciona en Firefox, no en Chrome

Question

Estoy usando un control deslizante jQuery para ajustar el relleno de un DIV que contiene texto de párrafo. A medida que aumento el relleno en todos los lados por igual, debe forzar los párrafos encerrados en una columna cada vez más estrecha, en el centro de la página.

Esto funciona en Firefox, pero en Chrome los anchos de los párrafos permanecen constantes (es decir, no se vuelven más angostos a medida que el acolchado del DIV los empuja), empujando el diseño hacia la derecha.

He vuelto a crear el problema aquí: jsfiddle.net/ms3Jd. Puedes probarlo en Chrome y Firefox para ver la diferencia.

¿Alguna idea sobre cómo forzar a Chrome a actualizar los párrafos adjuntos?

Answer 1

Sé que hay maneras de forzar (o truco) Chrome para actualización/dibujar/recalcuate los elementos de la página, pero no saben cómo hacer él. ¿Algunas ideas?

Tomado de aquí: 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'; 

que se aplica de forma rápida aquí, pero debe hacerlo en una función: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

Puede añadir el desbordamiento y el flotador propiedades:

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

Answer 3

estoy usando fadeTo a la fuerza de cromo para refrescar.
No estoy seguro pero supongo que es el animado en fadeTo que hace el truco
intente esa línea en jsfiddle.

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