jQuery सीएसएस प्रतिपादन - फ़ायरफ़ॉक्स में काम करता है, क्रोम में नहीं

Question

मैं अनुच्छेद पाठ वाले एक डीवीवी के पैडिंग को समायोजित करने के लिए एक jQuery स्लाइडर का उपयोग कर रहा हूं। जैसे-जैसे मैं सभी पक्षों पर पैडिंग को समान रूप से बढ़ाता हूं, इसे पृष्ठ के केंद्र में संलग्न पैराग्राफ को हमेशा-संकुचित कॉलम में मजबूर करना चाहिए।

यह फ़ायरफ़ॉक्स में काम करता है, लेकिन क्रोम में पैराग्राफ चौड़ाई स्थिर रहती है (यानी वे डीआईवी के पैडिंग के रूप में संकुचित नहीं होते हैं), इसलिए दाईं ओर लेआउट को दबाकर।

मैंने इस मुद्दे को यहां फिर से बनाया है: jsfiddle.net/ms3Jd। आप अंतर देखने के लिए क्रोम और फ़ायरफ़ॉक्स में इसे आजमा सकते हैं।

संलग्न पैराग्राफ को रीफ्रेश करने के लिए क्रोम को मजबूर करने के तरीके पर कोई विचार?

Answer 1

मैं जानता हूँ कि वहाँ/ ताज़ा करने के लिए मजबूर करने के लिए (या चाल) क्रोम पुनः बनाने/recalcuate पृष्ठ तत्वों तरीके हैं, लेकिन पता नहीं है कैसे करें। कोई विचार?

यहाँ से लिया: 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);