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
– Mateo, Commented Jan 19, 2012 at 14:32

Community · Accepted Answer · 2017-05-23 12:09:20Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Jan 19, 2012 at 15:10

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thirtydot Over a year ago

A jQuery plugin version: jsfiddle.net/thirtydot/ms3Jd/7. Might be overkill..

Mateo Over a year ago

It works - thank you (and other answerers) - you are a genius!

Prasad Jadhav · Accepted Answer · 2012-10-21 03:17:06Z

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, 2012 at 3:17

Prasad Jadhav

5,27416 gold badges65 silver badges81 bronze badges

answered May 11, 2012 at 19:16

Coimbra Matos

311 bronze badge

Comments

Ninja · Accepted Answer · 2012-01-19 14:38:41Z

0

You can add the overflow and float properties:

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

answered Jan 19, 2012 at 14:38

Ninja

5,1626 gold badges39 silver badges59 bronze badges

1 Comment

Mateo Over a year ago

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?

Collectives™ on Stack Overflow

jQuery CSS rendering - works in Firefox, not in Chrome

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related