परिणत: फ़ायरफ़ॉक्स

Question

के सभी संस्करणों में बेहद धीमी गति से बड़े पैमाने

कृपया इसकी जांच करें:

http://users.telenet.be/prullen/grid.html

इस सफारी में एक सामान्य गति है, लेकिन ज़ूम प्रभाव वास्तव में फ़ायरफ़ॉक्स में धीमी है।

दिलचस्प बात यह है कि अगर मैं जोड़ें:

.item { 
     width:100px; 
     height:100px; 
} 

यह थोड़ा (अभी भी पूरी तरह से धाराप्रवाह नहीं) में तेजी लाने के लिए लगता है। लेकिन उस आकार अपनी छवियों पर हैं नहीं है, इसलिए इसे में गड़बड़ लग:

http://users.telenet.be/prullen/grid2.html

अगर मैं आइटम चौड़ाई/ऊंचाई मेरी छवियों का आकार करने के लिए सेट, बात फिर से धीमा:

.item { 
     width:160px; 
     height:160px; 
} 

http://users.telenet.be/prullen/grid3.html

कोई विचार यह है कि इसका क्या कारण है? मैं विचारों से बाहर हूं, मैंने हटाए गए/जोड़े गए बयान दिए हैं लेकिन कुछ भी मदद नहीं करता है। यह संस्करण इस अलग फ़ायरफ़ॉक्स संस्करणों में परीक्षण किया जाता है 10

धन्यवाद, वेस्ले

Answer 1

अपने एनीमेशन बढ़ाया, आप #container .item .thumbnail से box-shadow संपत्ति को हटा सकते हैं पाने के लिए, इस संपत्ति के भारी है और अपने एनीमेशन धीमा कर देती है।
लेकिन यदि आप अभी भी छाया प्रभाव चाहते हैं, तो आप इसे पृष्ठभूमि के रूप में पीछे रखने की कोशिश कर सकते हैं, न कि एनीमेशन के हिस्से के रूप में।

इसमें कुछ बदलाव करना चाहिए, लेकिन एनिमेटेड div से box-shadow संपत्ति को हटाने से यह तेज़ी से बढ़ जाएगा। "आइटम ज़ूम" div एनीमेशन के लिए ज़िम्मेदार है। "आइटम" वर्ग से "ज़ूम" वर्ग को विभाजित करके और प्रत्येक पर सही सीएसएस गुणों को लागू करके, एनीमेशन तेजी से काम करेगा। (मैं फ़ायरबग साथ यह कोशिश की है)

HTML:

<div class="item"> 
    <div class="zoom"> 
    <div class="thumbnail"> 
     <img src="..."> 
    </div> 
    </div> 
</div> 

Answer 2

स्थिति आपके तत्व पूरी तरह से तो वे दस्तावेज़ के सामान्य प्रवाह का हिस्सा नहीं हैं। यह ऐसा कर देगा ताकि ब्राउजर हर बार एनीमेशन नाटकों के पेज को फिर से चलाने की कोशिश नहीं करता है।

जब तत्व अपेक्षाकृत स्थित होते हैं, तो वे एक-दूसरे को प्रभावित कर सकते हैं जब कोई बदल जाता है, इसलिए उन्हें यह सुनिश्चित करने के लिए फिर से खींचा जाना होगा कि एक तत्व को बदलने से उन सभी को प्रभावित नहीं किया गया है।

मैंने एक डेमो बनाया और तत्वों को पूरी तरह से स्थान दिया, आप देख सकते हैं कि एनिमेशन अधिक कुशल हैं। http://jsfiddle.net/QLTbU/