आईपैड पर वेबकिट ओवरफ्लो स्क्रॉलिंग टच सीएसएस बग

Question

यदि आप आईओएस के नवीनतम संस्करण पर अपने आईपैड डिवाइस पर इस पेज पर जाते हैं तो आप साथ चल सकते हैं।

http://fiddle.jshell.net/will/8VJ58/10/show/light/

मैं के साथ नए -webkit-अतिप्रवाह-स्क्रॉलिंग दो तत्व होते हैं: स्पर्श; संपत्ति और मूल्य लागू। बाएं हाथ के ग्रे क्षेत्र में बहुत सारी सामग्री है और चित्र या परिदृश्य में स्क्रॉल होगी। अधिकार केवल परिदृश्य में स्क्रॉल करेगा।

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

यह स्पष्ट है कि यह कैसे हो रहा है, लेकिन मेरे पास हमेशा क्षेत्र को भरने की सामग्री नहीं है।

तो कोई विचार? पहले से

धन्यवाद,
:) करेंगे

Answer 1

मैं वास्तव में ठीक उसी मुद्दा हो रहा है। मैंने इसे इस तथ्य से कम कर दिया है कि यह डीआईवी को प्रभावित करता है जिनकी सामग्री को तब बदलना पड़ता है जब अभिविन्यास बदल जाता है।

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

अद्यतन:

मैं वास्तव में लगता है यह तय कर दी है करने के लिए!

यह समस्या एक समय मुद्दा प्रतीत होता है। आकार बदलने के दौरान आंतरिक सामग्री बाहरी डीवी पर स्क्रॉलिंग के लिए पर्याप्त नहीं है जो अतिप्रवाह है। इस पर एक दिन बर्बाद कर के बाद, मैं अंत में इस हैक के साथ आया था:

<div id="header" style="position:fixed; height:100px">Header</div> 
<div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch"> 
    <div id="contentInner"> 
     content that is not long enough to always scroll during different orientations 
    </div> 
</div> 

यहाँ मेरी तर्क है कि जब भी पेज का आकार बदलता है:

function handleResize() 
    { 
     var iHeight = $(window).height() - $("#header").height(); 

     // Height needs to be set, to allow for scrolling - 
     //this is the fixed container that will scroll 
     $('#content').height(iHeight - 10); 

     // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing 
     // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll 
     $('#contentInner').height(1000); 

     // Set the heights back to something normal 
     // We have to "pause" long enough for the re-orientation resize to finish 
     window.setTimeout(delayFix, 10); 
} 

function delayFix() 
{ 
    var iHeight = $(window).height() - $("#header").height(); 

    // Inner divs force the outer div to always have at least something to scroll. This makes the inner DIV always "rubber-band" and prevents 
    // the page from scrolling all over the place for no reason. 
    // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the 
    // scrollable area to 'rubber band' properly 
    $('#contentInner').height(iHeight + 20); 

} 

Answer 2

एक समान के साथ देर से आ रहा है, लेकिन सरल समाधान।

var $el = $('.myElementClass'); 

function setOverflow(){ 
    $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'}); 
} 

function resizeHandler(){ 
    $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'}); 
    setTimeout(setOverflow,10); 
} 

[संपादित करें] से सावधान रहें, (एक बहुत) प्रयोग करने के बाद, मुझे पता चला है कि display:none घोषणाओं होगा निश्चित रूप से तोड़webkit-overflow-scrolling: touch सुविधा। कभी भी तत्वों (या तत्वों के माता-पिता) पर इसका उपयोग न करें जो स्पर्श स्क्रॉलिंग का समर्थन करने वाले हैं।

Answer 3

मुझे आईफोन, आईपॉड और आईपैड पर एक ही बग का अनुभव हुआ। यह केवल उत्तरार्द्ध तक ही सीमित नहीं है।

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

$(window).on('orientationchange', function(){ 
    var el = $('.troublemaker').detach(), 
     elh = el.height(); 
    setTimeout(el.css({'height':elh+'px'}).appendTo('.container'), 50); 
}); 

Answer 4

मैं सेटटाइमआउट का उपयोग किये बिना इस समस्या को ठीक करने के लिए आईओएस 6 रेड्रो को मजबूर करने के लिए ज्ञात "फिक्स" का उपयोग करने में सक्षम था।

$(window).on('orientationchange', function() 
{ 
    var $elem=$('[selector]'); 
    var orgDisplay=$elem.css('display'); 
    $elem.css('display','none'); 
    $elem.get(0).offsetHeight; 
    $elem.css('display',orgDisplay); 
});