CSSスクロールスナップバグiOS 10

Question

CSS scroll-snapのプロパティを持つiOS 10の奇妙なバグに気付きました。

はここに私のCSSです：私はプログラム的にスナップポイントにスクロールし、スクロールスナップコンテナ内のコンテンツを変更した場合

#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; 
} 

、NAVは、バック第1スナップ点にスナップします。

// 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以降に存在します。それはiOSの11

に固定されます場合

は知ってはいけない、私はこの問題を解決するこれまでのところ成功せずしようとして数日を過ごしました。

は、ここに私のNAVの削ぎ落とした例です：

Codepen Demo

誰もがこの 愚か バグを回避する方法を知っていますか？

Answer 1

このようにしてみてください：

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

Answer 2

私はページのロード時に起動されます私自身のHORIZONTALのjQueryスクロールのスナップを作成し、ウィンドウのサイズを変更し、コンテナのスクロール - これは、任意のを防ぎCSSの必要性：

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

if/else文は、widtに応じてオブジェクトの幅を変更する予定がある場合ですhのページです。そうでない場合、あなたはそれを削除し、VAR幅= あなたのデフォルトの幅を設定し、私が移動すると

以下

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)); 
}); 

は私のスクロールと一緒に行くCSSスナップ例

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%; 
    } 
}