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 (i.e. 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?

Could be - but 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? — Mateo, Jan 19 '12 at 14:32

score 13 · Accepted Answer · edited May 23 '17 at 12:09

13

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/

edited May 23 '17 at 12:09

Community

1
1

answered Jan 19 '12 at 15:10

thirtydot

224,678
48
389
349

2

A jQuery plugin version: http://jsfiddle.net/thirtydot/ms3Jd/7/. Might be overkill.. – thirtydot Jan 19 '12 at 15:26
It works - thank you (and other answerers) - you are a genius! – Mateo Jan 19 '12 at 16:12

score 3 · Answer 2 · edited Oct 21 '12 at 03:17

3

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

edited Oct 21 '12 at 03:17

Prasad Jadhav

5,090
16
62
80

answered May 11 '12 at 19:16

Coimbra Matos

31
1

score 0 · Answer 3 · answered Jan 19 '12 at 14:38

0

You can add the overflow and float properties:

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

answered Jan 19 '12 at 14:38

Ninja

5,082
6
37
59

Hmmm... that is progress, and gets us half way there. Thanks. I tried in in jsfiddle - as we increase the padding, the paragraphs DO recalculate. But if we then decrease the padding again, they don't widen again. Any further refinement you can offer? – Mateo Jan 19 '12 at 14:42

jQuery CSS rendering - works in Firefox, not in Chrome

3 Answers3

Linked