आईओएस 7

Question

पर पृष्ठ के साथ फिक्स्ड बॉडी बैकग्राउंड स्क्रॉल मैंने एक निश्चित बॉडी पृष्ठभूमि को बंद करने के लिए निम्न सीएसएस का उपयोग किया है। यह नए आईओएस 7 को छोड़कर लगभग सभी ब्राउज़रों पर अच्छा काम करता है। बाद में पृष्ठभूमि अब तय नहीं है। यह पृष्ठ के साथ स्क्रॉल करता है। कोई समस्या है कि समस्या को कैसे ठीक किया जाए?

body 
{ 
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg'); 
background-repeat: no-repeat; 
background-position: center; 
background-attachment: fixed;  
webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;  
} 

चीयर्स

Answer 1

मैं कोशिश करते हैं और कुछ संदर्भ मिल जाएगा, लेकिन मोबाइल ब्राउज़र background: scroll मजबूर क्योंकि repainting काफी महंगी है।

---

संदर्भ:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish भी इस का उल्लेख किया:

अचल पृष्ठभूमि विशाल रीपेंट लागत और स्क्रॉल प्रदर्शन है, जो तबाह, मुझे विश्वास है, क्यों यह अक्षम कर दिया गया था।

इसके आसपास के तरीके हैं, हालांकि .. लेकिन यह एक त्वरित समाधान नहीं है। निम्नलिखित प्रश्नों को देखें और इसकी टिप्पणी करें।

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Answer 2

मैं जब iOS7 के उन्नयन पृष्ठभूमि लगाव समस्या दिखाई दी। मुझे जावास्क्रिप्ट का उपयोग करके इस मुद्दे को ठीक करना पड़ा क्योंकि मैं अकेले सीएसएस के साथ समाधान नहीं समझ पाया।

if (iosVersion >= 7) { 
    $(document).scroll(function() { 
     $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px'); 
    }); 
} 

Answer 3

आप Backstretch jquery का भी उपयोग कर सकते हैं।

यह भारी नहीं है और iOS 7 पर अच्छी तरह से काम

Answer 4

मैं scrollr (https://github.com/Prinzhorn/skrollr) में देख सिफारिश करेंगे। यह एक लंबन पुस्तकालय है जो आपको एक ही प्रभाव प्राप्त करने की इजाजत देता है। उन्होंने सावधानी से मोबाइल उपकरणों के साथ मुद्दों पर विचार किया है:

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

आपने अभी मुझे बताया है कि यह मोबाइल पर काम नहीं करता है, लेकिन यह क्यों है? उत्तर सीधा है। मोबाइल पर स्क्रॉलर का उपयोग करते समय आप वास्तव में स्क्रॉल नहीं करते हैं। मोबाइल ब्राउज़र का पता लगाने पर, स्कॉलर देशी स्क्रॉलिंग को अक्षम करता है और इसके बजाय स्पर्श घटनाओं के लिए सुनता है और सामग्री को स्थानांतरित करता है (# स्कॉलर-बॉडी तत्व को अधिक विशिष्ट) सीएसएस ट्रांसफॉर्म का उपयोग करके। http://prinzhorn.github.io/skrollr/examples/classic.html

उदाहरण पृष्ठ, एक और मणि ध्यान देने योग्य पर कहा: जावास्क्रिप्ट के बिना

में खराबी आ (बिना मोबाइल पर निष्क्रिय किया जा सकता है

यहाँ क्लासिक लंबन पृष्ठभूमि कार्यान्वयन का एक उदाहरण है सब कुछ तोड़ना)।

Answer 5

मैं खोज कर रहा हूं, और जीथ्यूब पर प्रिंसज़र्न समाधान से मूल बातें इस्तेमाल कर रहा हूं। धन्यवाद, क्योंकि यह पूरी तरह से काम करता है। मेरे पास केवल एक पृष्ठभूमि-छवि है जो आईपैड को छोड़कर, हर डिवाइस पर दिखाई देती है, और अब छवि पृष्ठभूमि-संलग्न = निश्चित और छवि पृष्ठभूमि-आकार: कवर।

Answer 6

मेरे पास यह ठीक करने के सभी तरीकों से संघर्ष करने के बाद, बहुत सरल समाधान था।

मुझे अपने मोबाइल आईओएस उपकरणों पर समस्या थी।

सीएसएस (डेस्कटॉप)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 
background-size: auto; 
background-attachment: fixed; 
} 

.widget-wrap { 
background-attachment: scroll; 
} 

तो मैं मीडिया क्वेरी को हटाने पृष्ठभूमि अनुलग्नक के रूप में "निर्धारित" के साथ इसे अधिलेखित।

सीएसएस (मोबाइल)

@media (max-width: 767px) { 
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 

    background-attachment: initial; 

} 
} 

प्रारंभिक - समूह को उसके डिफ़ॉल्ट मान इस संपत्ति। मुझे लगता है क्योंकि आईओएस 'फिक्स्ड' स्वीकार नहीं करता है, यह एक डिफ़ॉल्ट मान पर वापस आ जाता है जो इसे स्वीकार करता है, स्क्रॉल करें।

यह हर डिवाइस पर मेरे लिए काम करता है। उम्मीद है कि यह किसी और की भी मदद करता है।