jQuery CSS-рендеринг - работает в Firefox, а не в Chrome

Question

Я использую ползунок jQuery для настройки заполнения текста текста абзаца DIV. По мере того как я увеличиваю заполнение со всех сторон одинаково, он должен заставить заключенные абзацы войти в более узкую колонку в центре страницы.

Это работает в Firefox, но в Chrome ширина абзаца остается постоянной (т. Е. Они не становятся уже, когда на них накладывается прокладка DIV), поэтому нажимаем макет справа.

Я воссоздал вопрос здесь: jsfiddle.net/ms3Jd. Вы можете попробовать его в Chrome и Firefox, чтобы увидеть разницу.

Любые идеи о том, как заставить Chrome обновить прилагаемые абзацы?

Answer 1

Я знаю, есть способы, чтобы заставить (или трюк) Chrome для обновления/перерисовки/recalcuate элементы страниц, но не знаю, как сделать it. Есть идеи?

Взято отсюда: 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'; 

Я быстро применил его здесь, но вы должны сделать это в функцию: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

Вы можете добавить переполнение и поплавковые свойства:

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

Answer 3

Я использую fadeTo, чтобы заставить хром, чтобы обновить.
Не уверен, но я думаю, это анимация на fadeTo, что делает трюк
попробуйте эту строку на jsfiddle.

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