How to get datatable's Processing... message to display in front of Table while using scrollX?

Hi, I'm working on an application that uses a datatable. I'm trying to get the displayed "Processing..." message that occurs when the table is loading more data to appear in front of the datatable, which normally works fine and looks like this

However, after I enable scrollX: true, the message becomes obscured behind the table like this

Any idea about what is going on? I want to have X scrolling enabled an have the processing message shown over top of the table

Here is the code for my datatable

    $('#my-table').dataTable({
        "order": [[2, "desc"]],
        buttons: [
        'print',
        'copyHtml5',
       ]
        dom: 'Bfrtip',
        searching: false,
        serverSide: true,
        processing: true,
        scrollX: true,
        type: "POST"
    });