जब मैं आईओएस सफारी 9 +

Question

में नीचे स्क्रॉल करता हूं तो निश्चित तत्व क्लिक करने योग्य नहीं होते हैं, मैं केवल आईओएस सफारी 9 + (8.4 ठीक है) पर एक बहुत ही परेशान करने वाली समस्या में भाग लेता हूं, जहां उपयोगकर्ता तुरंत पृष्ठ को स्क्रॉल करता है जिसके परिणामस्वरूप निश्चित तत्वों के भीतर एंकर लिंक अब उपस्थिति के कारण क्लिक करने योग्य नहीं होते हैं और वास्तविक क्लिक/हिट क्षेत्र इसके तत्व के साथ अस्तर नहीं करते हैं जब तक उपयोगकर्ता फिर से स्क्रॉल नहीं करता है।

यह हर बार ऐसा नहीं होता है, और सिस्टम को "तोड़ने" के लिए कुछ प्रयास कर सकता है। काम करने के लिए सामग्री व्यूपोर्ट से अधिक होनी चाहिए।

समस्या का कोई समाधान अभी तक। कैसे मैं इस मुद्दे को हल कर सकता हूँ?

अद्यतन: आगे परीक्षण के बाद, आईओएस सफारी 9 और उसके बाद की समस्या केवल आईओएस 8 पर परीक्षण की गई और कोई समस्या नहीं है।

अद्यतन 2: ऐसा नहीं है कि यह सबसे position:fixed; और यहां तक ​​कि position:-webkit-sticky; उपयोग करने वाली वेबसाइटों पर होता है अब स्पष्ट है। आपने :)

एचटीएमएल देखना चाहें

<section> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 

<div class="sticky"> 
    <a href=""></a> 
</div> 

सीएसएस:

html, body { 
    margin:0; 
} 

article { 
    display: block; 
    height: 200px; 
    width: 100%; 
    margin-bottom: 20px; 
    background: whitesmoke; 
} 

.sticky { 
    width:100%; 
    height:100px; 
    position: fixed; 
    bottom:0; 
    background: orange; 
    text-align:center; 

} 

.sticky a { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: yellow; 
} 

http://codepen.io/toobulo/pen/dGEodo

मुद्दा, Codepen संपादक के भीतर नहीं होता यह है के रूप में मोबाइल सफारी के लोचदार/टूलबार आकार में परिवर्तन से संबंधित। खुद पृष्ठ में कोड निर्यात करें, या दिए गए लिंक का उपयोग करें:

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

Answer 1

यह समस्या ios में उछाल प्रभाव से संबंधित है और उपकरण पट्टी & हेडर बार खोने। एक ही रास्ता है कि मैं इसे ठीक करने के पाया है निम्न करने के लिए है:

html, 
body { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: auto 
} 

साथ ही आप तो यह केवल मोबाइल के लिए काम करता है एक ब्रेकप्वाइंट पर यह कर सकता है। उम्मीद है की यह मदद करेगा।

** अतिप्रवाह स्क्रॉलिंग जोड़ा गया।

Answer 2

आप बना सकते हैं। स्टिकी लिंक पूर्ण करें और निम्न सीएसएस लागू करें ताकि लिंक विंडो/ब्राउज़र से स्वतंत्र हो।

.sticky { 
    width: 50px; 
} 
.sticky a { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}