2011-10-18 12 views
5

(फ़ायरफ़ॉक्स, सफारी और क्रोम के नवीनतम संस्करणों सहित सीएसएस संक्रमणों का समर्थन करने वाले ब्राउज़र के लिए। आश्चर्यजनक रूप से, यह समस्या ओपेरा में दिखाई नहीं दे रही है ।)सीएसएस संक्रमण फ़्लिकर्स: सफारी, क्रोम और फ़ायरफ़ॉक्स में गए, लेकिन ओपेरा

क्या किसी और ने यह देखा है? जब आप एक: रंग पर एक रंग संक्रमण डालते हैं, तो ए: होवर रंग प्रदर्शित करने से पहले एक: लिंक रंग में संक्रमण का दौरा किया जाता है। इसे देखें:

http://jsfiddle.net/Mgzv9/2/

इस रंग झिलमिलाहट से बचा जा सकता है?

+0

और नवीनतम क्रोम विज़िट किए गए लिंक पर भी संक्रमण नहीं करता है ... – Zade

उत्तर

0

मैंने कभी रंग का उपयोग करते समय ऐसा नहीं देखा। लेकिन हाँ यह बैगग्राउंड में छवियों का उपयोग करते समय होता है। यह लोडिंग समय का bcoz है, और एक बड़ी छवि में सभी संक्रमण छवियों का उपयोग करके बचाया जा सकता है और छवि को नियंत्रित करने के लिए बैग-स्थिति संपत्ति का उपयोग कर सकते हैं।

+0

यह तीन नवीनतम ब्राउज़र में होता है; JSFiddle देखें। – Zade

1

मैं थोड़ी देर के लिए इस समस्या के आसपास अपने सिर को टक्कर लगी हूं।

बात यह है कि यह समस्या वास्तव में पुन: उत्पन्न करना मुश्किल है।

ठीक है, तो क्या होता है, कभी-कभी लिंक पर रंग संक्रमण के साथ किसी पृष्ठ को लोड/रीफ्रेश करते समय, रंग को पहले डिफ़ॉल्ट ब्राउज़र लिंक रंग से सीएसएस परिभाषित रंग में परिवर्तित किया जाता है। यह वास्तव में मेरे लिए नहीं होता है, जब मैं डिस्क से HTML खोलता हूं, लेकिन अगर मैं इसे सर्वर (यहां तक ​​कि स्थानीय सर्वर) में डालता हूं, तो यह समस्या दिखाई देती है।

समस्या को पुन: करने के लिए, एक HTML बनाने के लिए, एक स्टाइलशीट जोड़ने के लिए और लिंक के लिए एक संक्रमण, कुछ इस तरह परिभाषित करते हैं:

a { 
    color: red; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    -ms-transition: color .5s linear; 
    transition: color .5s linear; 
} 

a:hover { 
    color: green; 
} 

... और फिर अपने HTML में स्टाइलशीट शामिल हैं।

फ़ाइलों को सर्वर पर रखें, और क्रोम में पृष्ठ खोलने का प्रयास करें, साइट को रीफ्रेश करने का प्रयास करें, कभी-कभी आपको पृष्ठों को लोड होने पर डिफ़ॉल्ट नीले रंग से संक्रमण को देखना चाहिए।

कुछ साइटों को रद्द करने के बाद, जहां इसके साथ कोई समस्या नहीं थी, मैं इस सरल समाधान के साथ आया।

यदि आप कुछ जावास्क्रिप्ट फ़ाइलों को भी शामिल करते हैं, तो बस अपने सीएसएस में के बाद जावास्क्रिप्ट को शामिल करें।

स्टाइलशीट के बाद, यदि आप केवल एक खाली जेएस फ़ाइल शामिल करते हैं तो यह भी काम करता है।

आशा है कि इससे मदद मिलती है!

+2

कितना दिलचस्प है। मुझे आपका जावास्क्रिप्ट फिक्स नहीं मिल रहा है कोई फर्क पड़ता है। उदाहरण के लिए, soulmastery.net देखें। मुझे स्थानीय फाइलें और सर्वर फ़ाइलों को देखने के बीच कोई अंतर नहीं दिख रहा है। सफारी 5.1.2 और फ़ायरफ़ॉक्स 8.0.1 (ओएस एक्स शेर चल रहा है) में समस्या बनी हुई है। सौभाग्य से, ऐसा लगता है कि क्रोम ने इस मुद्दे को हल किया है (15.0.874.121 में)। – Zade

+0

बग/फीचर (कहना मुश्किल है क्योंकि यह स्पष्ट रूप से कुछ इच्छित व्यवहार का परिणाम है) अभी भी क्रोम 25 और एफएफ 24 के रूप में मौजूद है - लेकिन फिक्स वर्क्स। मैंने अपना जेएस * हेड टैग * से बाहर रखा है, (और आपको निश्चित रूप से इसे * सीएसएस लिंक * के बाद रखना चाहिए) - और यह काम करता है! उद्धरण: "शरीर में लोड होने से पहले सिर में कुछ भी पूरा किया जाना चाहिए, इसलिए आम तौर पर वहां जावास्क्रिप्ट डालना एक बुरा विचार है। अगर आपको शरीर लोड होने के दौरान कुछ चाहिए, या कुछ AJAX को तेज करना चाहते हैं, तो यह होगा इसे सिर में रखने के लिए उपयुक्त है। " यह उदाहरण के लिए जाता हैwp_head() [वर्डप्रेस], जो * से पहले * जाना चाहिए। – vaxquis

संबंधित मुद्दे