2012-10-27 22 views
5

क्या किसी और के पास इस तरह का मुद्दा था? मेरे पृष्ठ के शीर्ष पर एक ड्रॉप डाउन मेनू है, फिर flexslider, फिर कुछ सामान्य पाठ और छवियां ... दो फोंट हैं, जिन्हें Google फोंट एपीआई से बुलाया जाता है और एक फ़ॉन्टफैस का उपयोग कर रहा है (बस अगर यह प्रासंगिक है !) ..फ्लेक्सस्लाइडर वास्तव में क्रोम में मेरे वेबपृष्ठ को गड़बड़ कर रहा है

मेरे मैक पर क्रोम में देखते समय मुझे कुछ अजीब व्यवहार मिलता है। प्रत्येक बार स्लाइड चलने पर पृष्ठ पर मौजूद सभी टेक्स्ट बहुत "पतले" होते हैं, और कुछ (लेकिन सभी नहीं) नेविगेशन लिंक "कूद" ऊपर और ठीक पिक्सेल द्वारा मिलता है। मैंने ऐसा कुछ नहीं देखा है और केवल यह मान सकता है कि यह कुछ अजीब संघर्ष है ?? मैंने मैक, आईई 9, विंडोज़ पर क्रोम और विंडोज़ पर एफएफ पर जो कुछ भी पा सकता हूं, एफएफ, ओपेरा, सफारी और क्रोम में पाया है। क्रोम के दोनों संस्करण अच्छे दिखते नहीं हैं, लेकिन मैक एक बहुत खराब है।

दुर्भाग्यवश, मैं 100% पूर्ण होने तक वेब पर अपनी प्रोजेक्ट सूचीबद्ध नहीं करता हूं, और मुझे लगता है कि यह एक बेवकूफ बनाने के लिए बहुत अधिक सामान है .. लेकिन वास्तविक flexslider वेब पेज को देखने के बाद मुझे एक ही तरह का मिला गलती, अगर आप थंबनेल देखते हैं तो आप देखेंगे कि मेरा क्या मतलब है (यदि आप निश्चित रूप से क्रोम में हैं)। - http://flexslider.woothemes.com/thumbnail-controlnav.html

क्या किसी को भी एक फिक्स पता है क्योंकि मैं उस कोड को रखना चाहता हूं जिस पर मैं काम कर रहा हूं!

+0

क्रोम 22.0.122 9.9 4 win7, क्रोमियम 23.0.1255.0 (154635) लिनक्स, एमएसआईई 9 win7 - नमूना पृष्ठ समान दिखता है। शायद आप स्क्रीनशॉट पोस्ट कर सकते हैं। – nrodic

+0

हाय नोडोडिक - इसे कैप्चर करना मुश्किल होगा क्योंकि यह लगभग एक सेकंड के लिए होता है और यह पिछले (सही) स्थिति में वापस आता है ... – Dan

+0

मुझे क्रोम 22.0.122 9.9 4 (मैक) पर कोई समस्या नहीं दिखाई दे रही है। – manishie

उत्तर

0

मुझे एक ही समस्या का सामना करना पड़ रहा है, जिसने आज फ्लेक्सस्लाइडर को बूटस्ट्रैप उत्तरदायी साइट में लागू किया है। समस्या फ़ायरफ़ॉक्स या सफारी पर दोहराना नहीं है (अभी तक आईई की जांच नहीं की है और विशेष रूप से नहीं चाहते हैं)।

मुझे दृढ़ता से संदेह है कि समस्या विभिन्न स्पर्श, कीप्रेस और अन्य तरीकों से जुड़ी है, फ्लेक्सस्लाइडर जेएस स्लाइड शो को आगे बढ़ाने के लिए लागू करता है, क्योंकि मैंने अपना सीएसएस (मेरे href सहित Google फ़ॉन्ट एपीआई) और जेएस स्क्रिप्ट को एक-एक करके हटा दिया है यह निर्धारित करें कि फ्लेक्सस्लाइडर का जेएस अपराधी प्रतीत होता है। अच्छी खबर यह है कि यह बूटस्ट्रैप उत्तरदायी जेएस के साथ एक संघर्ष नहीं है, और न ही यह किसी अन्य सीएसएस शैलियों की प्रतीत होता है। फिर भी समस्या निवारण हालांकि, क्षमा करें मैं और अधिक सहायक नहीं हो सकता लेकिन कम से कम यह सिर्फ आप नहीं है।

मैं इसे फ्लेक्सस्लाइडर मंच पर पोस्ट करने जा रहा हूं। हो सकता है कि डेवलपर अगली रिलीज में इस क्रोम बग को ठीक करे।


क्रोम v23.0.1271.64

16

मिले एक फिक्स कि जे एस बिना छुए क्रोम में समस्या को हल करने लगता है:

-webkit-backface दृश्यताuseCSS के साथ संयुक्त : स्लाइडर init में सही क्रोम के नीचे तोड़ने के लिए निश्चित स्थिति और जेड-इंडेक्सिंग का कारण बनता है। मुझे एहसास हुआ कि अजीबता तब हो रही थी जब मैंने निश्चित शीर्ष नौसेना, स्लाइडर कंटेनर और जेड-इंडेक्स वैल्यू के साथ खेलना शुरू किया - निश्चित नेविबार की तुलना में ज़ेड-इंडेक्स को उच्चतम सेट करना, अजीब टेक्स्ट ब्लिंक दूर हो गए लेकिन निश्चित रूप से स्लाइडर निश्चित navbar के शीर्ष पर स्क्रॉल किया गया।

  • "flexslider.css" लाइन 25 में: .flexslider

    इस को हल करने के लिए, निम्न दो बातें।स्लाइड> ली या टिप्पणी-webkit-backface-visibility: छुपा;

  • flexslider आरंभीकरण स्क्रिप्ट में: निर्दिष्ट 'useCSS: झूठी' अपने स्लाइडर विकल्पों में *

* इस flexslider जे एस द्वारा एक डिफ़ॉल्ट के रूप में सही पर सेट किया जाता है और करने के लिए ब्राउज़र बताता है अगर वे उपलब्ध हैं तो CSS3 3 डी ट्रांसफॉर्म का उपयोग करें। यदि आप मुझसे पूछते हैं तो एक अनावश्यक सुविधा, और flexslider इसके बिना ठीक काम करता प्रतीत होता है।

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

+0

धन्यवाद, यह बहुत दिलचस्प है। मैं काम पर बहुत सुंदर हूं लेकिन मैं जल्द ही इस पर वापस आना चाहता हूं क्योंकि मेरा अगला काम भी एक उत्तरदायी स्लाइडर की आवश्यकता होगी! – Dan

+4

मुझे बस इतना करना था कि उपयोग निर्दिष्ट किया गया थाएसएस: झूठी, और यह मेरे लिए मुद्दा तय कर दिया। धन्यवाद! क्रोम 24.0.1312.56 – kukabuka

+0

इसी तरह - 'useCSS: false' का उपयोग करके मुझे भी इसकी आवश्यकता है। – jhawes

5

स्थिति जोड़ें: रिश्तेदार & z- सूचकांक: सीएसएस फ़ाइल में 1 .flex-व्यूपोर्ट में

+0

पूरी तरह से मेरे लिए काम किया ... कम से कम इस फिक्स गड़बड़ (घूर्णन) ग्राफिक्स (जबकि -webkit-backface-visibility दृष्टिकोण नहीं था)। – AaL

0

"flexslider.css" में खोजें ".flexslider .slides> ली" बाहर टिप्पणी या -webkit-backface- को दूर दृश्यता: छुपा;

0

समाधान जो gruntPi9 ने सुझाव दिया है मेरे लिए काम किया। मुझे क्रोम में कोई समस्या थी, छवियां फ्रेम से बाहर कूद रही थीं, और उनके समाधान ने समस्या हल की।

स्लाइडर: FlexSlider 2

ब्राउज़र: क्रोम

समस्या: छवियाँ एक फ्रेम

समाधान से कूदते हुए:

  • में "flexslider.css" लाइन 25: .flexslider .slides> li टिप्पणी या हटाएं -webkit-backface-दृश्यता: छुपा;
  • "jquery.flexslider.js" में: निर्दिष्ट करें: अपने स्लाइडर विकल्पों में 'useCSS झूठी'
+0

'useCSS: false' विकल्प ने उन मुद्दों को ठीक किया जो मेरे पास अजीब तत्वों के साथ थे। स्लाइड पेज एनीमेशन शुरू होने या समाप्त होने पर मेरे पृष्ठ पर बहुत सारे तत्व 1 पिक्सेल को स्थानांतरित करना प्रतीत होता था। – user2254926

17

लागू -webkit-परिणत: translateZ (0); प्रभावित तत्व के कंटेनर के लिए और यह झिलमिलाहट रोक देगा।

यह तब भी काम करता है जब आपके पास टेक्स्ट युक्त फ्लेक्सस्लाइडर के भीतर कोई तत्व होता है।

सीएसएस परिवर्तन अभी भी कुछ अजीब व्यवहार का कारण बनता है। तत्व को 3 डी के रूप में प्रस्तुत करने के लिए मजबूर करना ग्राफिक और प्रदर्शन ग्लिच के लिए हल करना प्रतीत होता है।

क्रोम v27.0.1453.93 पर परीक्षण किया गया।

+2

यह एकमात्र सही उत्तर है। मैं कसम खाता हूँ मैंने सोचा कि मैं पागल हो रहा था। एक फॉर्म पर लेबल झटके और आवेदन कर रहे थे -वेबिट-ट्रांसफॉर्म: translateZ (0);

टैग को समस्या ठीक कर दी गई है। बहुत बहुत धन्यवाद। –

+0

यह बहुत दिलचस्प है। मैं हाल ही में CSS3 एनीमेशन तकनीकों के साथ और अधिक काम कर रहा हूं, और इसे आजमाउंगा। मैंने अब कई वेबसाइटें देखी हैं जहां कुछ सामग्री एक पिक्सेल या दो "कूदती है" जब एक तत्व एनिमेट कर रहा है। सफारी मेरे लिए ऐसा नहीं प्रतीत होता है ... – Dan

+0

यह बिल्कुल सही था। – Daimz

1

मुझे पता है कि यह पुराना है, लेकिन मैंने सोचा कि मैं बस एक घंटे के लिए चारों ओर झुकाव के बाद अपना समाधान पोस्ट कर दूंगा।

जैसा कि ऊपर:

  • में "flexslider.css" लाइन 25: .flexslider।स्लाइड> ली टिप्पणी या हटाएं -webkit-backface-दृश्यता: छुपा;
  • flexslider आरंभीकरण स्क्रिप्ट में: निर्दिष्ट करें: अपने स्लाइडर विकल्प में 'useCSS झूठी'
  • -webkit-परिणत: translateZ (0) पेरेंट तत्व पर

फिर इस "flexslider के नीचे करने के लिए जोड़ .css ":

.flex-viewport { 

    -webkit-transition: none; 
    -moz-transition: none; 
    transition: none; 
} 

यह क्रोम पर मेरे लिए किया था! उम्मीद है कि यह किसी और को इस समस्या के साथ मदद करता है।

+0

यह वही है जो UseCSS तर्क को गलत पर सेट करता है। बैकफ़ेस-विज़िबिलिटी प्रॉपर्टी का उपयोग करके CSS3 समस्याओं को बहुत दूर हल किया जाता है। – Dan