IE9 Ghost columns - again!

I having the old ghost columns problem but this time with a new twist. It only seems to appear when I increase the page length from 10 to 50/100. I've tried all the suggested fixes of CSS changes and whitespace removal but the problem remains. Firefox and Chrome work fine.

my code is below

$(document).ready(function () {
    var oTable = $("#demoPolygons").DataTable({
        "sDom": 'T<"clear">frtlp',
        "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
        "iDisplayLength" : 50,
        "oTableTools": {
            "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": ["select_all", "select_none", "copy", "csv"]
        }
    });

    $("#demoPolygons tfoot th").each(function (i) {
        var select = $('<select><option value=""></option></select>')
            .appendTo($(this).empty())
            .on('change', function () {
                oTable.column(i).search($(this).val()).draw();
            });

        oTable.column(i).data().unique().sort().each(function (d, j) {
            select.append('<option value="' + d + '">' + d + '</option>');
        });
    });

    oTT = TableTools.fnGetInstance('demoPolygons');
});

https://mega.co.nz/#!oIIGWazK!_c7V3xEOxCgDjAbBEVAaz5cMBh7STsgMXRjuFEjyNMY