Firefox Android Y Scrolling Issues

mcornwell

Hello,

I am seeing a pretty hellacious bug for datatables using Firefox on Android. (I have tested it on Chrome on Android, and Firefox & Safari on Apple, absolutely no problems).

Essentially if one has many items in the table and you scroll to the bottom of the table (maybe the bottom of the page?) it will "bounce" the view back up to the top of the table, which will push the table further down into the page (leaving a large gap above the table). If you continually scroll to the bottom it will bounce back up and increase the page size again and again. If you scroll back up to the top of where the table would be normally, it collapses the entire Y axis back to the size its supposed to.

Any recommendations on how to debug this, or is this a known bug?
Thanks for your time.

Steps to Reproduce:
1. Use firefox on android
2. Use Code provided below.
3. Click add to create 100 rows.
4. Use the dropdown to show 100.
5. Scroll all the way to the bottom of the page.
6. Note how the screen will bounce up and increase the size of the page.

Below I have included a basic table code where you click a button to add 100 rows.

<h1>Top of page</h1>
<table id="table" class="display" style="width:100%">
   <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tfoot>
       <tr>
           <th>Name</th>
        </tr>
    </tfoot>
</table>
<button onclick="onClick();">Add</button>
<script>
    $(document).ready(function() {
        var table = $('#table');
        t = table.DataTable({
            "scrollX": true,
            "columns": [
                {"data": "name"},
            ]
        });

        onClick = function() {
            for(var i = 0; i < 100; ++i) {
                t.row.add({
                    name: 'Test ' + i.toString(),
                }).draw( false );
            }
        };
    } );
</script>

colin

Hi @mcornwell ,

It's not a known issue. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin