Chrome / Chromium 31, Opera 18 में glitches की संभावना है: nth-last-child जैसे चयनकर्ता सही तरीके से काम नहीं कर सकते हैं

पिछले कुछ दिनों में क्रोम के मुद्दों में, कई मुद्दे सामने आए हैं, जो लगभग निम्नलिखित परिदृश्य का वर्णन करता है: एक भारी css3 चयनकर्ता का उपयोग किया जाता है, जिसके परिणामस्वरूप गलत हैंडलिंग होती है। विशेष रूप से, कई ऑब्जेक्ट्स के लिए चयनकर्ता सही तरीके से काम नहीं कर सकता है, कॉमा (# ए, # बी, # सी आदि) द्वारा अलग किया गया, nth-last-child निश्चित रूप से गलत तरीके से काम करता है। इसके साथ बग की पहचान करने की गारंटी।
समस्या सीएसएस क्वेरी तंत्र में लगती है, क्योंकि document.querySelector भी सही तरीके से संबोधित नहीं है। सबसे अप्रिय क्या है - jQuery भी देशी कार्यों पर निर्भर करता है (यदि वे मौजूद हैं)। इस प्रकार, जटिल jQuery के प्रश्नों ने भी सही ढंग से काम करना बंद कर दिया।
यदि nth-last-child का उपयोग आपकी परियोजनाओं में किया जाता है, तो कट के नीचे बग का विवरण

बग सभी ओएस के तहत दिखाई देता है: क्रोम रिपॉजिटरी में रिपोर्ट विंडोज़ के तहत जाती है, हम मैक ओएस में एक समस्या में भाग गए।
संस्करण 31 में, यह पता चला कि एक बहुत ही अजीब nth-last-child व्यवहार दिखाई दिया:
: nth-last-child (1) ==: अंतिम-बच्चा, शायद यह क्वेरी ऑप्टिमाइज़ेशन के बारे में है।
: nth-last-child (2) == null
: nth-last-child (3) ==: nth-child (1)
: nth-last-child (4) ==: nth-child (2)
और इसी तरह।
इस मामले में, यह व्यवहार शैली में किसी भी बदलाव के साथ शामिल है। यह हो सकता है: होवर, और jQuery इनिशियलाइज़ेशन।

विशेष रूप से, संवेदनाएं बताती हैं कि अन्य "भारी" सीएसएस 3 चयनकर्ता भी सही तरीके से काम नहीं कर सकते हैं।

हमारे मामले में, खोज के तुरंत बाद, हमने सभी परियोजनाओं की जाँच की और कोड के दो टुकड़ों में $ (': nth-last-child (3)') पाया। सौभाग्य से, चयनकर्ता ने कार्यक्षमता को थोड़ा प्रभावित किया। अन्य परियोजनाओं में, समान चयनकर्ता भी कभी-कभी पाए जाते हैं (दोनों शैलियों और कोड में), इसलिए साइटों के थोड़े असामान्य काम के लिए तैयार रहें, और साइट जितनी अधिक जटिल होगी, दुनिया में सबसे लोकप्रिय ब्राउज़र में अजीब व्यवहार होने की संभावना उतनी ही अधिक होगी जो स्वचालित रूप से कम से कम अगले कुछ समय में अपडेट हो जाती है। दिन।
हाँ, यह क्रोम की सामान्य बगों में से एक लगता है, लेकिन परेशानी यह है कि कुछ परियोजनाओं में बैसाखी के रूप में nth-last-child का उपयोग करना, दुर्भाग्य से, एक अपेक्षाकृत सामान्य अभ्यास है, लेकिन, उदाहरण के लिए, हेडर के लिए सशर्त ब्लॉक चौड़ाई के साथ एक समाधान दिखाई दिया है। दो साल पहले।

गलत व्यवहार के उदाहरण:

एक उदाहरण से थोड़ा संशोधित कोड:
http://codepen.io/anon/pen/buDsp
गड़बड़ को शुरू करने के लिए, माउस को मंडलियों में ले जाएं।
क्या होता है के साथ Gif: (बस एक होवर, कोई क्लिक नहीं)


एक ही समय में, nth-of-type और nth-last-of-type काम सही ढंग से करते हैं, इसलिए ज्यादातर मामलों में आप उन्हें अस्थायी समाधान के रूप में उपयोग कर सकते हैं।
ओह, हाँ, मुद्दा, पहले से ही क्रोमियम ट्रैकर में है, क्योंकि यह बहुत शुरुआत में लिखा गया था, यह सिर्फ उन लोगों के लिए जानकारी है जो उत्पादन में nth-last-child का उपयोग करते हैं - कि यह चयनकर्ता गलत तरीके से काम करने की संभावना है।