JQuery CSS rendering - работает в Firefox, а не в Chrome

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Взято отсюда: Как заставить WebKit перерисовывать/перерисовывать для распространения изменений стиля?

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/

Ответ 2

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

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

Ответ 3

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

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