iPhoneで-webkit-overflow-scrollingを設定した要素が消える

-webkit-overflow-scrolling

モバイル端末でoverfllow: scroll等の擬似フレームでのスクロールを通常のように慣性スクロールへ変更するときに指定する。
※Android4.4未満やiosなど
Android4.4以降のものは指定せずに慣性スクロールになっている

css

div {
  -webkit-overflow-scrolling:touch;
}

-webkit-overflow-scrollingを指定した要素をtouchすると消えてしまう。

モーダル等display: none;になっているものの中の要素へ指定するとtouchした瞬間に消えてしまう？

解決法
cssで-webkit-overflow-scrolling:touch;を指定するclassを作りfadeIn等のコールバックでクラスを追加する。
fadeOut時のコールバックではクラスを削除。

css

.scrolling-touch {
  -webkit-overflow-scrolling:touch;
}

javascript

$(function(){
  $('.target').fadeIn(1000, function(){
    $('.scroll').addClass('.scrolling-touch');
  });
  $('.target').fadeOut(1000, function(){
    $('.scroll').removeClass('.scrolling-touch');
  });
});