jQuery CSS rendering - works in Firefox, not in Chrome

Question

I'm using a jQuery slider to adjust the padding of a DIV containing paragraph text. As I increase the padding on all sides equally, it should force the enclosed paragraphs into an ever-narrower column, in the center of the page.

This works in Firefox, but in Chrome the paragraph widths remain constant (ie they don't become narrower as the DIV's padding pushes in on them), so pushing the layout to the right.

I've recreated the issue here: jsfiddle.net/ms3Jd . You can try it in Chrome and Firefox to see the difference.

Any ideas on how to force Chrome to refresh the enclosed paragraphs?

Answer 1

I know there are ways to force (or trick) Chrome to refresh/redraw/recalcuate the page elements, but don't know how to do it. Any ideas?

Taken from here: 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';

I quickly applied it here, but you should make it into a function: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

I'm using fadeTo to force chrome to refresh.
Not sure but I guess it's the animate on fadeTo that does the trick
try that line on jsfiddle .

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

Answer 3

You can add the overflow and float properties:

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