Hiển thị CSS jQuery - hoạt động trong Firefox, không phải trong Chrome

Question

Tôi đang sử dụng thanh trượt jQuery để điều chỉnh phần đệm của một DIV chứa văn bản đoạn. Khi tôi tăng phần đệm trên tất cả các mặt bằng nhau, nó sẽ buộc các đoạn kèm theo vào một cột hẹp hơn, ở giữa trang.

Tính năng này hoạt động trong Firefox, nhưng trong Chrome chiều rộng đoạn vẫn không đổi (tức là chúng không bị thu hẹp khi đệm của DIV đẩy vào chúng), do đó hãy đẩy bố cục sang phải.

Tôi đã tạo lại sự cố tại đây: jsfiddle.net/ms3Jd. Bạn có thể dùng thử trong Chrome và Firefox để thấy sự khác biệt.

Bất kỳ ý tưởng nào về cách buộc Chrome làm mới các đoạn được đính kèm?

Answer 1

Tôi biết có nhiều cách để buộc (hoặc lừa) Chrome để refresh/vẽ lại/recalcuate các yếu tố trang, nhưng không biết cách thực hiện . Ý tưởng nào?

Taken từ đây: 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'; 

Tôi nhanh chóng áp dụng nó ở đây, nhưng bạn nên làm cho nó thành một chức năng: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

Bạn có thể thêm tràn và nổi tính:

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

Answer 3

Tôi đang sử dụng fadeTo để buộc chrome để làm mới.
Không chắc chắn nhưng tôi đoán đó là animate trên fadeTo có mẹo
thử dòng đó trên jsfiddle.

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