css - テーブル ヘッダーがタッチ デバイスで機能しない問題を修正

Question

スクロール時にテーブルヘッダーが修正されるページの中央にテーブルを実装しました。すべてのブラウザで正常に動作しますが、タッチ デバイス (モバイル デバイス) では動作しません。タッチ デバイスでのスクロール終了時に固定ヘッダーが適用されるため、問題が発生します。

タッチ デバイス (iPhone、iPad) のジャダリングを取り除く方法はありますか?

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();        
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

body { 
    height: 1000px; 
    font-size:20px;
}
#header-fixed { 
    position: fixed; 
    top: 0px; 
    display:none;
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Here is some content</h1>
<table id="table-1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<table id="header-fixed"></table>