2013-11-01 8 views
7

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

http://themes.roussounelosweb.gr/cassiopeia/

Firefox, IE 9, ओपेरा, सफारी में , आईओएस वेबसाइट सही दिखती है, और आसानी से चलता है। समस्या क्रोम और एंड्रॉइड डिवाइसों के साथ निहित है, जहां स्क्रॉलिंग अविश्वसनीय रूप से लगी है और लंबन प्रभाव का उपयोग कर पृष्ठभूमि छवियां चतुरता से एनिमेट कर रही हैं।

मुझे संदेह है कि यह समस्या पृष्ठभूमि आकार के साथ है: कवर और पृष्ठभूमि-अनुलग्नक: मेरी छवियों के निश्चित गुण, लेकिन मुझे अभी तक इस समस्या का समाधान नहीं मिला है।

आप इसे पहले से देख सकते हैं और उपरोक्त लिंक पर एक बेहतर विचार प्राप्त कर सकते हैं। कृपया सहायता कीजिए; मैं इस परियोजना को खत्म करने वाले आखिरी कदमों पर हूं, और यह बग वास्तव में मुझे वापस पकड़ रहा है।

section{ 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment:fixed; 
overflow:hidden; 
} 

section.section1{ 

background-image:url(../img/section1.jpg); 
background-repeat:no-repeat; 
color:#dedede; 
text-shadow:1px 1px 5px rgba(0,0,0,0.8); 
position:relative; 
padding:20px 0px; 
z-index:1; 
overflow:hidden; 
} 
+0

वास्तव में अच्छी त्वचा! लेकिन शायद यह उस से संबंधित हो सकता है जिसकी त्वचा लगभग 7 एमबी में 2 मेगापिक्सल के साथ एक मेग पर होती है? अनुलेख आपके सिर में एक डीआईवी है :-) – Robert

+0

पॉल आयरिश एक महान [YouTube पर वीडियो] है (http://www.youtube.com/watch?v=mSK70FwUz2A) मूल रूप से समान समस्या को डिबग करना - एक नज़र के लायक हो सकता है । –

+0

क्रोम पर लंबन प्रदर्शन मुद्दा मुख्य कारण है कि मैं आमतौर पर लंबन तकनीकों का उपयोग नहीं करता हूं। भले ही प्रश्न सफलतापूर्वक उत्तर दिया गया और इस मामले को ठीक कर दिया गया हो, तो क्या कोई मुझे बता सकता है कि यह केवल कॉन क्रोम ब्राउज़र क्यों होता है? ओपी के अनुसार, लगभग किसी भी अन्य डिवाइस/ब्राउज़र पर साइट सुचारू रूप से चलती है (और बीटीडब्ल्यू महान डिज़ाइन, अच्छी नौकरी!) लेकिन क्रोम ब्राउज़र और एंड्रॉइड पर यह सिर्फ चटनी हो जाती है। – Gruber

उत्तर

7

मुझे विश्वास नहीं है कि आपकी समस्या सीएसएस में है, बल्कि जेएस में है।

सबसे पहले, मैं देख सकता हूं कि आप nallcroll का उपयोग parallax.js के साथ कर रहे हैं। यह दोनों विरोधाभासी हो सकते हैं - अपने जेएस से nicescroll हटाने की कोशिश करें और जांचें कि यह बेहतर है या नहीं।

दूसरे, साथ डेवलपर्स के उपकरण समय अपने फ्रेम गतिविधि का विश्लेषण, आप सटीक बिंदु है जहां फ्रेम ड्रॉप देख सकते हैं:

Devtools timeline

आप 33 टाइमर जब आप स्क्रॉल रहे फायरिंग कर रहे हैं। आप शायद स्क्रॉल ईवेंट से एक समय में एक कॉलबैक को अनबैंड करने और समस्याग्रस्त होने की जांच करने के लिए अपने कोड को डीबग करने का प्रयास कर सकते हैं।

अद्यतन:

मुझे लगता है कि रॉबर्ट यह सही टिप्पणी में मिला: अपनी पृष्ठभूमि भारी हैं। चूंकि यह पहले से ही एक बड़ा और सीपीयू गहन पृष्ठ है, मुझे लगता है कि ब्राउज़र ऐसे बड़े तत्वों पर लंबन में कठिनाई के साथ संभालता है। कम गुणवत्ता पर उन्हें संक्षिप्त, संपीड़ित करने और सहेजने का प्रयास करें।

+1

अक्षम nicescroll और अधिकांश समस्या चली गई। इन सभी दिनों में सीएसएस खोज रहे थे और यह जेएस था जिसमें एक समस्या थी। आपके समय के लिए बहुत बहुत धन्यवाद, बहुत सराहना की। –

+0

@ user2946214 अच्छा! मैं खुशी से मदद कर सकता है। – skz

+0

कुछ घटनाओं को थ्रॉटल करने के लिए underscore.js लाइब्रेरी का भी उपयोग किया जाता है, टेम्पलेट सभी डिवाइस/कॉन्फ़िगरेशन पर अब बहुत आसान बनाता है। –

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