Google Chrome और ओपेरा में एंकर और UL सूचियों के साथ फिक्स्ड पोजिशनिंग समस्या

यह आलेख Google Chrome और ओपेरा ब्राउज़र में देखी गई एक रेंडरिंग समस्या को संबोधित करता है जहां पृष्ठ के भीतर एंकर लिंक पर क्लिक करने पर एक निश्चित स्थिति वाला साइडबार गायब हो सकता है। पृष्ठ पर

तत्वों की उपस्थिति इस समस्या को बढ़ा देती है।

Chrome Solution

-webkit-transform: TranslateZ(0) प्रॉपर्टी को निश्चित साइडबार पर लागू करना तत्व क्रोम में इस समस्या का समाधान करता है। यह तकनीक 3डी ट्रांसफॉर्मेशन को शामिल करते समय रीपेंट और सीएसएस रेंडरिंग को अलग करने का फायदा उठाती है, जिससे डिस्प्ले की गड़बड़ियां कम हो जाती हैं।

#sidebar {
    -webkit-transform: translateZ(0);
}

ओपेरा समाधान

ओपेरा में इस मुद्दे को संबोधित करने के लिए एक अलग दृष्टिकोण की आवश्यकता है। हम CSS प्रॉपर्टी पर निरंतर पुनः पेंट करने के लिए @keyframes एनीमेशन का उपयोग करते हैं जो लेआउट को प्रभावित करता है लेकिन पेज उपस्थिति पर कोई व्यावहारिक प्रभाव नहीं डालता है। इस मामले में, हम मार्जिन-बॉटम प्रॉपर्टी को एनिमेट करते हैं:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

यह ध्यान रखना महत्वपूर्ण है कि यह समाधान दोषरहित नहीं है। कुछ मामलों में, एक संक्षिप्त झिलमिलाहट तब हो सकती है जब साइडबार अपनी स्थिति खो देता है और जल्दी से दोबारा तैयार हो जाता है। पुनर्लेखन के बीच ओपेरा का आंतरिक व्यवहार इस समस्या के लिए जिम्मेदार है। शरीर या मूल तत्व। यह अभ्यास, जिसका उपयोग अक्सर GPU रेंडरिंग को लागू करने के लिए किया जाता है, लगातार रेंडरिंग समस्याओं को जन्म दे सकता है। ऊपर दिए गए समाधानों को लागू करने से पहले मौजूदा 3D परिवर्तनों को हटाने पर विचार करें।

Google Chrome और ओपेरा अब बेहतर स्थिरता के साथ निश्चित स्थिति को संभालते हैं। इन सुधारों ने पृष्ठ पर यूएल तत्वों के उपयोग से जुड़ी रेंडरिंग समस्याओं को हल करने में प्रभावशीलता प्रदर्शित की है।