renderowanie CSS jQuery - działa w przeglądarce Firefox, a nie w Chrome

Question

Używam suwaka jQuery do dopasowania dopełnienia tekstu akapitowego zawierającego DIV. Gdy zwiększam wypełnienie równomiernie ze wszystkich stron, powinien wymusić załączone akapity w coraz węższej kolumnie na środku strony.

Działa to w przeglądarce Firefox, ale w Chrome szerokość akapitów pozostaje stała (tzn. Nie stają się one węższe w miarę wciskania przez DIV), więc przesuwając układ w prawo.

Odtworzyłem ten problem tutaj: jsfiddle.net/ms3Jd. Możesz wypróbować to w Chrome i Firefox, by zobaczyć różnicę.

Jakieś pomysły, jak zmusić Chrome do odświeżenia załączonych akapitów?

Answer 1

wiem, że istnieją sposoby, aby siły (lub podstęp) Chrome odświeżania/przerysować/recalcuate elementy strony, ale nie wiem jak to zrobić go. Jakieś pomysły?

Zrobione stąd: 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'; 

szybko go zastosowano tutaj, ale należy zrobić to do funkcji: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

można dodać przepełnienie i unoszą nieruchomości:

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

Answer 3

Używam fadeTo zmusić chrom, aby odświeżyć.
Nie jestem pewien, ale myślę, że to ożywione na fadeTo że robi trick
spróbować tej linii na jsfiddle.

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