दिलचस्प पोस्ट
एंड्रॉइड इन्टेंट फिल्टर: फ़ाइल एक्सटेंशन के साथ सहयोगी ऐप एप्पल के नेटवर्क लिंक कंडीशनर उपकरण को स्थापित करना एक स्थैतिक आरंभीकरण ब्लॉक में एक योग्य स्थिर अंतिम चर की अनुमति क्यों नहीं है? जूमला 1.5 में बाहरी फॉर्म का उपयोग करना (जूमला फ़ोल्डर में नहीं, बल्कि एक ही सर्वर पर) सी-ऑब्जेक्ट सी क्लास को सी + ऑब्जेक्ट जोड़ना सी # में ब्योरा स्विच करें? क्यों मुझे "एल्गोरिथ्म नहीं मिल रहा है" और "फिट संख्यात्मक 0 या 1" glm के साथ चेतावनी? 1/252 = 0 में सी #? Android Gradle प्लगइन का उपयोग करके संकलन से पहले कार्य चलाएं आप विजुअल स्टूडियो 2012 में जीएलयूटीयूटी और ओपनजीएल कैसे स्थापित करते हैं? किसी सूची में सभी तत्वों को कैसे प्राप्त करें? CanExecuteChanged और CommandManager.RequerySuggested का वास्तविक कार्य क्या है? बहुरूपता के साथ deserializing कैसे संभालना है? डिफ़ॉल्ट छवि गैलरी से चयनित चित्र की सही ओरिएंटेशन कैसे प्राप्त करें माणिक 1.9: यूटीएफ -8 में अवैध बाइट अनुक्रम

Chrome में निश्चित तत्व गायब हो जाता है

सीएसएस प्रॉपर्टी की position: fixed का उपयोग करते हुए मैंने बनाई गई वेबसाइट पर स्क्रॉल करते हुए position: fixed काम के रूप में पृष्ठ के शीर्ष पर एक नेविगेशन बार रखने की अपेक्षा की।

क्रोम में, हालांकि, यदि आप नेविगेशन बार में लिंक का उपयोग करते हैं तो यह कभी-कभी गायब हो जाता है आमतौर पर, आपके द्वारा क्लिक किए गए आइटम अभी भी दिखाई देता है, लेकिन हमेशा नहीं। कभी-कभी पूरी चीज गायब हो जाती है माउस के आसपास चलकर तत्व का एक हिस्सा वापस लाया जाता है, और स्क्रॉल व्हील या तीर कुंजियों के साथ स्क्रॉल करना सिर्फ एक क्लिक तत्व को वापस लाता है। आप http://nikeplusphp.org पर यह हो सकता है (अंतःस्थापित) देख सकते हैं – आपको नेविगेशन के कुछ पर क्लिक करने के लिए लिंक कुछ समय पर हो सकता है।

मैंने z-index और दृश्यता / डिस्प्ले प्रकार के साथ खेलने की कोशिश की है, लेकिन कोई भाग्य नहीं के साथ।

मैं इस प्रश्न पर आया था लेकिन फिक्स ने मेरे लिए बिल्कुल भी काम नहीं किया। आईई और फ़ायरफ़ॉक्स काम के रूप में एक वेबकिट मुद्दा लगता है बस ठीक है।

क्या यह एक ज्ञात मुद्दा है या क्या तय तत्वों को दिखाई देने के लिए कोई फिक्स है?

अद्यतन करें:

केवल प्रभाव वाले तत्व top: 0; , मैं bottom: 0; की कोशिश की bottom: 0; और जो अपेक्षाकृत काम करता है

Solutions Collecting From Web of "Chrome में निश्चित तत्व गायब हो जाता है"

जोड़ें -webkit-transform: translateZ(0) position: fixed -webkit-transform: translateZ(0) position: fixed तत्व यह क्रोम को स्थिर तत्व पेंट करने के लिए हार्डवेयर त्वरण का उपयोग करने के लिए मजबूर करता है और इस विचित्र व्यवहार से बचें।

मैंने इस https://bugs.chromium.org/p/chromium/issues/detail?id=288747 के लिए एक क्रोम बग बनाया है। कृपया इसे तारांकित करें, जिससे कुछ ध्यान हो सके।

यह मेरे लिए इसे ठीक करता है:

 html, body {height:100%;overflow:auto} 

मुझे क्रोम के साथ एक ही समस्या थी, ऐसा लगता है कि जब बगैर पेज के अंदर चल रहा है, तो मैं इसे ठीक कर पा रहा हूं, ताकि मैं इसे बदल सकूं। transform: translateZ(0);-webkit-transform: translateZ(0); ) जो ब्राउजर को पिक्सेल फ्लाई बनाने के लिए डिवाइस के ग्राफिकल प्रोसेसिंग यूनिट (जीपीयू) तक पहुंचने के लिए हार्डवेयर त्वरण का उपयोग करने के लिए मजबूर करता है। दूसरी तरफ, वेब अनुप्रयोग, ब्राउज़र के संदर्भ में चलते हैं, जो सॉफ्टवेयर को रेंडरिंग के सबसे अधिक (यदि सभी नहीं) कर देता है, जिसके परिणामस्वरूप संक्रमण के लिए कम अश्वशक्ति होती है। लेकिन वेब पकड़ रहा है, और अधिकांश ब्राउज़र विक्रेताओं अब विशेष सीएसएस नियमों के माध्यम से ग्राफिकल हार्डवेयर त्वरण प्रदान करते हैं।

-विबकिट-ट्रांसफॉर्मेशन का उपयोग करना: अनुवाद 3 डी (0,0,0); सीपीयू संक्रमण के लिए कार्रवाई में जीपीयू को लात मार देगा, जिससे उन्हें चिकना (उच्च एफपीएस) बना दिया जाएगा

नोट: अनुवादित 3 डी (0,0,0) आप जो देखते हैं, उसके संदर्भ में कुछ नहीं करता है। यह ऑब्जेक्ट xp, y और z axis में 0px से चलता है। हार्डवेयर त्वरण को लागू करने के लिए केवल एक तकनीक है

 #element { position: fixed; background: white; border-bottom: 2px solid #eaeaea; width: 100%; left: 0; top: 0; z-index: 9994; height: 80px; /* MAGIC HAPPENS HERE */ transform: translateZ(0); -webkit-transform: translateZ(0); } 

उपरोक्त विकल्प मेरे लिए काम नहीं कर रहे थे, जब तक कि मैंने दिए गए दो समाधानों को मिश्रित नहीं किया।

निश्चित तत्व के लिए निम्नलिखित जोड़कर, यह काम किया है असल में मेरे लिए ज़ेड-इंडेक्स भी आवश्यक था:

 -webkit-transform: translateZ(0); z-index: 1000; 

यह एक वेबकिट समस्या है जो अभी तक हल नहीं की गई है, अजीब तरह से # यूआरएल मान का उपयोग करने के बजाय जावास्क्रिप्ट के साथ कूद, समस्या का कारण नहीं है। इस मुद्दे पर काबू पाने के लिए, मैंने एक जावास्क्रिप्ट संस्करण दिया है जो एंकर मूल्य लेता है और उस आईडी के साथ तत्व की पूर्ण स्थिति पाता है और उस पर कूद जाता है:

 var elements = document.getElementsByTagName('a'); for(var i = 1; i < elements.length; i++) { elements[i].onclick = function() { var hash = this.hash.substr(1), elementTop = document.getElementById(hash).offsetTop; window.scrollTo(0, elementTop + 125); window.location.hash = ''; return false; } } 

मैं इसे और परिष्कृत कर सकता हूं और ऐसा ही बना सकता हूं कि केवल यह लिंक # साथ शुरू होता है, बजाय a टैग की खोज करता है

पूर्ण समाधान / सभी ब्राउज़र्स

HTML कोड

 <body> <div class="wrapper"> <div class="static"> <div class="header"> </div> </div> <div class="content"> </div> </div> </body> 

सीएसएस स्टाइल

 body { background: #000000; margin: 0px auto auto auto; padding: 0px; max-width: 830px; height:100%; overflow:auto; } .wrapper { margin: 0px auto; height: 89%; width: 830px; } .static { width: 815px; z-index: 2; height: 145px; position: fixed; padding-left: 0px; margin: auto; } .content { width: 820px; float: left; position: relative; top: 125px; margin: auto; padding-top: 25px; } .header { height: 150px; width: 820px; margin-left: auto; margin-right: auto; margin-top: -2px; padding: 5px; overflow:auto; } 

यदि ऊपर दिए गए उत्तर में से कोई भी आपके लिए काम नहीं करता है, तो सुनिश्चित करें कि आप मेरे जैसे डमी नहीं हैं और ओवरफ्लो हैं: छुपा; निश्चित तत्व पर सेट करें 🙁

यदि उपरोक्त में से कोई भी काम नहीं करता है तो क्या होगा? चिपचिपा हैडर का सरल मामला + मोबाइल साइड मेन्यू सामग्री को धक्का दे रहा है।

मैं निर्धारित तत्व (चिपचिपा शीर्षलेख) से बचने का एक रास्ता खोजना चाहता हूं, लेकिन इस मामले में कुछ भी अच्छा विकल्प नहीं है।

इसलिए कि इस क्षेत्र पर कोई वैकल्पिक समाधान नहीं है, इसलिए अभी तक एक जेएस विकल्प है जो मैंने निर्धारित तत्व की पूर्ण स्थिति की पुनर्गणना करने का विकल्प चुना है। यहां देखें: https://stackoverflow.com/a/21487975/2012407

मुझे एक अलग मामले में एक ही समस्या का सामना करना पड़ा। यह एक ही स्थान के एकाधिक स्थान पर उपयोग के कारण था। उदाहरण के लिए मैंने #full 2 ​​divs का इस्तेमाल किया

ऐसा लगता है कि मोज़िला और आईई कई मामलों में एक ही आईडी का उपयोग कर रहे हैं। लेकिन क्रोम नहीं है यह मेरे मामले में निराधार तत्व के साथ प्रतिक्रिया व्यक्त किया।

बस आईडी को समस्या हल करने के लिए निकालना

अगर यह जोड़ने के बाद काम नहीं करता है

-वेबकिट-ट्रांसफॉर्मः अनुवादित करें (0)

से भी जोड़ना

उपयोगकर्ता-मापनीय = नहीं

व्यूपोर्ट मेटा पर

यहाँ स्रोत

यह मेरे लिए काम किया