jQuery CSS-Rendering - funktioniert in Firefox, nicht in Chrome

Question

Ich verwende einen jQuery-Schieberegler, um die Auffüllung eines DIVs mit Absatztext anzupassen. Wie ich die Auffüllung auf allen Seiten gleich zu erhöhen, sollte es zwingen die eingeschlossenen Absätze in eine immer schmalere Spalte, in der Mitte der Seite.

Dies funktioniert in Firefox, aber in Chrome bleiben die Absatzbreiten konstant (d. h. sie werden nicht schmaler, wenn das DIV-Padding auf sie drückt), wodurch das Layout nach rechts verschoben wird.

Ich habe das Problem hier nachgestellt: jsfiddle.net/ms3Jd . Sie können es in Chrome und Firefox ausprobieren, um den Unterschied zu sehen.

Haben Sie eine Idee, wie man Chrome zwingen kann, die enthaltenen Absätze zu aktualisieren?

Answer 1

Ich weiß, dass es Möglichkeiten gibt, Chrome zu zwingen (oder auszutricksen), um zu zwingen, die Seitenelemente zu aktualisieren/neu zu zeichnen/zu rekalibrieren, aber ich weiß nicht, wie man es tun. Irgendwelche Ideen?

Entnommen von hier: Wie kann ich WebKit zwingen, neu zu zeichnen/zu malen, um Stiländerungen zu übertragen?

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

Ich habe es hier schnell angewandt, aber Sie sollten daraus eine Funktion machen: http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

Ich benutze fadeTo um Chrome zum Aktualisieren zu zwingen.
Ich bin mir nicht sicher, aber ich vermute, es ist die Animation auf fadeTo das ist der Trick
Probieren Sie diese Zeile an jsfiddle .

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

Answer 3

Sie können die Eigenschaften overflow und float hinzufügen:

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