Css स्क्रॉल तस्वीर बग, iOS 10

Question

मैं सीएसएस scroll-snap गुणों के साथ आईओएस 10 में एक अजीब बग देखा।

यहाँ मेरी सीएसएस है:

#springBoard{ 
    height: 100%; 
    width: 100%; 
    font-size: 0px; 
    white-space: nowrap; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    -webkit-scroll-snap-type: mandatory; 
    -webkit-scroll-snap-points-x: repeat(100%); 
} 

section{ 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    vertical-align: top; 
    font-size: 16px; 
} 

मैं प्रोग्राम के रूप में एक तस्वीर सूत्री करने के लिए स्क्रॉल और फिर स्क्रॉल स्नैप कंटेनर के अंदर सामग्री को बदलते हैं, एनएवी वापस पहले स्नैप-बात करने के लिए तस्वीरें।

// Programatically scroll the scroll-snap container 
$("#springBoard")[0].scrollLeft = 320 

यह स्क्रॉलिंग को ट्रिगर करने के तरीके से संबंधित प्रतीत नहीं होता है।

$("#springBoard")[0].scrollLeft = 320 
$("#springBoard").animate({scrollLeft: 320}, 1) 
$("#springBoard > section:eq(1)")[0].scrollIntoView() 
window.location.hash = "sectionId" 

1. जब मैन्युअल रूप से स्क्रॉल बग नहीं होता है (नीचे @ मैक्सिमे की टिप्पणी देखें): इन सभी स्क्रॉल तरीकों एक ही परिणाम का उत्पादन।
2. यह iOS के संस्करण 10.3.2 के बाद से मौजूद है। अगर यह आईओएस 11.

में ठीक किया गया हो, तो मुझे कुछ दिनों के खर्च मुद्दा लेकिन सफलता नहीं मिली अब तक हल करने की कोशिश

पता नहीं है।

Codepen Demo

किसी को भी इस बेवकूफ बग के आसपास एक तरह से पता है:

यहाँ मेरी एनएवी की एक छीन नीचे उदाहरण दिया गया है?

Answer 1

इस तरह का प्रयास करें:

$('#springBoard').animate({scrollLeft: $('#springBoard').position().left + 320},1); 

Answer 2

मैं अपने खुद के HORIZONTAL jQuery स्क्रॉल तस्वीर जिस पर पृष्ठ लोड, खिड़की ट्रिगर किया जाता है बनाया आकार बदलने, और कंटेनर की स्क्रॉल - इस रोकता है किसी भी सीएसएस की आवश्यकता:

$(".container").scroll(function() { 

निम्नलिखित अगर/अन्य कथन है तो क्या आप चौड़ाई के आधार पर ऑब्जेक्ट की चौड़ाई को बदलने की योजना बना रहे हैं पृष्ठ के एच। यदि नहीं, तो आप बस इसे हटा सकते हैं और वर चौड़ाई = अपने डिफ़ॉल्ट चौड़ाई सेट

var width = 1; //100% - default value/small screen 
    if(window.innerWidth >= 993) //large screen 
     width = 1/4; //25% 
    else if(window.innerWidth >= 601) //medium screen 
     width = 1/3; //33.333% 

    var containerWidth = $(".container").width(); 
    var sectionWidth = containerWidth * width; //gets the length of each section 

    var currentScroll = $(".container").scrollLeft(); 
    var farOff = currentScroll % sectionWidth; //determines how far user is from the beginning of the current section 
    if(farOff == 0) //just for efficiency 
     return; 

    clearTimeout($.data(this, 'scrollTimer')); 

    $.data(this, 'scrollTimer', setTimeout(function() { 
     if(farOff >= sectionWidth/2) //scroll-snaps to next section 
      $(".container").animate({ 
       scrollLeft: (currentScroll + sectionWidth - farOff), 
      }); 
     else //scroll-snaps to previous section 
      $(".container").animate({ 
       scrollLeft: (currentScroll - farOff), 
      }); 
    }, 550)); 
}); 

नीचे तो मैं नेविगेट सीएसएस कि मेरी पुस्तक के साथ चला जाता स्नैप उदाहरण

div.container{ 
    overflow-x: scroll; 
    -webkit-overflow-scrolling: touch; 
    -o-overflow-scrolling: scroll; 
    -moz-overflow-scrolling: scroll; 
    overflow-y: hidden; 
    white-space: nowrap !important; 
} 
.container section{ 
    display: inline-block; 
    padding: 10px; 
    width:100%; 
    vertical-align: top; 
    margin-bottom: 10px; 
} 
.container > section > div{ 
    overflow: initial; 
    white-space: normal; 
} 
@media (min-width: 601px){ /* medium */ 
    .container section{ 
     width: 33.33333333%; 
    } 
} 
@media (min-width: 952px){ /* large */ 
    .container section{ 
     width: 25%; 
    } 
}