आईओएस पर फिक्स्ड पोजीशन पृष्ठभूमि

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

http://confitdemo.wordpress.com/

कोई सुराग कि वे किस तरह कि बंद खींच रहे हैं? मैंने कोशिश की:

#content-wrapper.posts-page { 
background-attachment: fixed !important; 
background-clip: border-box; 
background-color: transparent; 
background-image: url("image path"); 
background-origin: padding-box; 
background-position: right top; 
background-repeat: no-repeat; 
background-size: cover; 
}

(यह फायरबग से कॉपी किया गया था, यही कारण है कि यह शॉर्टेंड नहीं है)।

लेकिन कोई भाग्य नहीं था। कोई मुझे सही दिशा में इंगित करता है?

स्रोत

2013-04-15 JeremyE

मुझे लगता है कि समस्या यह है कि आपकी तालिका पृष्ठभूमि की सबसे अधिक संभावना का आकार बदलती है, इसलिए यदि आप यह घोषणाएं जोड़ते हैं, तो संभवतः हुड में इसे ठीक से चलाना चाहिए।

background-attachment: fixed !important; 
background-size: cover !important;

संपादित करें:

यह does not काम केवल अन्य कारण से मैं के बारे में सोच सकते हैं कि किसी भी तरह ios शरीर के आकार का आकार बदलने के सामग्री के रूप में के रूप में बड़ा होने के लिए चाहिए, आप तो है क्या करना है है सही गुणों के साथ शरीर टैग के अंदर एक div बनाने

#fixebg{ 
background: url(image.jpg) top; 
height:100%; 
width:100%; 
position:fixed; 
}

यहाँ एक समान समाधान है:

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

संपादित करें - 2:

जोड़ा एक बेला आप देख सकते हैं:

http://jsfiddle.net/uZRXH/3/

और यहाँ अपने iPad पर इसे आज़माने के लिए लिंक है:

http://fiddle.jshell.net/uZRXH/3/show

स्रोत

2013-04-15 06:47:24 Breezer

क्षमा करें, मैं पूर्ण कोड शामिल करना चाहिए था। मैंने पूर्ण कोड को शामिल करने के लिए मूल पोस्ट संपादित किया। – JeremyE

@ जेरेमी क्या आप मुझे अपनी साइट पर एक लिंक भेज सकते हैं, क्योंकि मैंने डेमो बनाया है और यह मेरे लिए बिल्कुल ठीक काम करता है। – Breezer

ने मूल पोस्ट के लिए एक डेमो लिंक जोड़ा। यह नियमित ब्राउज़रों में ठीक काम करता है, लेकिन एक आईपैड पर पृष्ठभूमि स्क्रॉल करता है। – JeremyE

यह वेबसाइट मोबाइल ब्राउज़र में एक चाल का उपयोग करती है, इस तथ्य का लाभ उठाती है कि background-attachment: fixed काम नहीं करता है, position: fixed करता है, इसलिए मोबाइल ब्राउज़र में यह केवल <div> बनाता है जो स्क्रॉलिंग सामग्री के पीछे रहता है।

स्रोत

2014-05-16 22:37:14 rev087

ठीक है, इसलिए मैं पहले से ही उस साइट का निर्माण कर रहा हूं, एक निश्चित पृष्ठभूमि वाला हिस्सा गड़बड़ हो जाएगा यदि मैंने इसे div में एक निश्चित स्थिति देने के लिए इसे एक div में लपेट लिया। इसलिए मैंने यह लिखा और यह आईफोन पर काम करता है।

मुझे मिल गया है एक निश्चित हैडर तो इस का उपयोग करने के लिए आसान था, लेकिन कुछ भी व्यूपोर्ट करेंगे के शीर्ष पर allways है कि ...

 if (//on mobile) { 
      var headerH, headerH2, viewportH, sliderH, res 
      viewportH = $(window).height(), 
      headerH2 = 80 //correction when measuring with fixed header, 
      $topheader = $('.top_header'), 
      $slider = $('#twinslider') //the element to check for if in viewport; 
      function getH() { 
       headerH = $topheader.offset().top; 
       sliderH = $slider.offset().top; 
       res = (((headerH - headerH2) - sliderH) + viewportH)/viewportH; 
       if (res > 0 && res < 1.4) { 
        return res; // thats truthy and a value for further calculation 
       } else { 
        return false; 
       } 
      } 
      getH(); 

      setInterval(function(){ // before i listened to scroll, but this was better for performance 
       if (getH()) {//if slider is in viewport 
        $slider.find('li').css({ //the element to set the background pos for 
         'background-position': 'center ' + res * 50 + '%' 
        }, 100); 

       }     
      }, 25); 

     }

और फिर तत्व एक 'तय पृष्ठभूमि देने के लिए दे 'पृष्ठभूमि की स्थिति में एक संक्रमण और आप कर रहे हैं। हालांकि वह साफ नहीं है .... और मुझे लगता है कि एक बेहतर समाधान है ... लेकिन यह काम करता है।

स्रोत

2015-03-25 09:48:10

यदि आप एक ही दृष्टिकोण पर अन्यथा छवियों छिपा रखा जाता है लिंक छवियों (पृष्ठभूमि के पीछे)

2) है

1) z-index: -1; Breezer का दूसरा दृष्टिकोण में जोड़ा जाना चाहिए, मैं के बाकी से पहले div डाल करने के लिए किया था के रूप में सामग्री निम्न या सामग्री div टैग के अंदर जोड़ा जाता है, तो पेज गैर स्क्रॉल था:

<body> <div id="fixedbg"></div>  </body>

स्रोत

2017-01-11 06:08:35 Rafael

आईओएस पर फिक्स्ड पोजीशन पृष्ठभूमि

उत्तर

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