DataTables resize unpredictably when using scrolling

cavac

I have a problem where datatables resize whitout rhyme or reason in a very odd way when using scrolling.

In my project, this only happens when using client side processing. When i use server side, the table seems to behave as it should.

Here is the Javascript code:

                filter_table = $('#MainFilterTable').dataTable( {
                    ordering: true,
                    searching: true,
                    scrollY: 500,
                    scroller: {
                        loadingIndicator: true
                    },
                    "language": {
                       "lengthMenu": "[% tr.trquote("Display _MENU_ records per page") %]",
                       "zeroRecords": "[% tr.trquote("No matches found") %]",
                       "info": "[% tr.trquote("Showing _START_ to _END_ of _TOTAL_ records") %]",
                       "infoEmpty": "[% tr.trquote("Showing 0 to 0 of 0 records") %]",
                       "infoFiltered": "[% tr.trquote("(filtered from _MAX_ total records)") %]",
                       "first": "[% tr.trquote("First") %]",
                       "last": "[% tr.trquote("Last") %]",
                       "search": "[% tr.trquote("Filter results") %]",
                       "processing": '<img src="/static/loading_bar.gif[% URLReloadPostfix %]">'
                    },
                });

I captured a short video to show the problem: https://www.youtube.com/watch?v=0LhYMYWHZLU

What am i doing wrong here?