Jquery Css Rendering - Works In Firefox, Not In Chrome

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

Solution 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/

Solution 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);

Solution 3:

You can add the overflow and float properties:

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