स्टेटिक पोजीशनिंग प्रदर्शन को धीमा कर देती है (?)

Question

मैं एक विचार पर स्केचिंग कर रहा था जब अचानक अचानक कुछ अजीब प्रतिपादन प्रदर्शन मुद्दों पर ठोकर खाई। मैंने विचार को चित्रित करने के लिए एक कोडपेन बनाया है, यह एक नेविगेशन तत्व है जो position: fixed से position: static में बदलता है जब यह पाद लेख के साथ "टक्कर" करता है। तो ऐसा लगता है कि पाद लेख इसे दबा रहा है।

यह कोई छोटी जेएस जेएस (मैंने जेएस के बिना कोशिश की) है जो स्थिति-मोड में परिवर्तन करते समय प्रदर्शन को धीमा कर देता है। मुझे सीएसएस प्रॉपर्टी मिली है जो स्क्रॉलिंग के दौरान ब्राउज़र को प्रस्तुत करने के लिए बहुत अधिक भारी बनाता है।

आईई 10/फ़ायरफ़ॉक्स में यह ठीक काम करता प्रतीत होता है, क्रोम में वेबिनस्पेक्टर एफपीएस-मीटर में देख सकता है कि यह प्रस्तुत करने के लिए बहुत भारी है।

हालांकि, मुझे सबसे अजीब मिला; सफारी में, यह बहुत प्रस्तुत करने के लिए धीमा है। लेकिनposition: fixed के साथ एक अतिरिक्त तत्व जोड़कर सफारी इसे सबसे अच्छा प्रदान करता है। (सफारी संस्करण 9.0.1 (11601.2.7.2))

अतिरिक्त तय तत्व के साथ

: http://codepen.io/slebbo/pen/GpPRQX

अतिरिक्त तय तत्व के बिना: http://codepen.io/slebbo/pen/avPZxy

मेरे गूगल कौशल इस एक के साथ कोई मदद नहीं थे, किसी को भी कि इस व्यवहार का जवाब है। विशेष रूप से सफारी के साथ, यह वास्तव में फंकी है।

Answer 1

आपको हार्डवेयर त्वरित तत्व होना चाहिए जो इन समस्याओं को देते हैं, विशेष रूप से निश्चित तत्वों को स्क्रॉल पर पुनर्निर्मित करने की आवश्यकता होती है। वही जब आपके पास पृष्ठभूमि छवियों को कवर करने के लिए सेट किया गया है और इसी तरह।

आप का उपयोग करके ऐसा कर सकते हैं: backface-visibility: hidden;

या यहाँ तक कि: will-change: transform;