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

Question

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

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

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

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

Answer 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/

Answer 2

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

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

Answer 3

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

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