Responsive.recalc partially not working on iOS Safari (iPhone)

Hi,

I'm working on a website where fancybox opens a new iframe with some bootstrap Tabs, each containing a datatable.

I'm using the current function to redraw the table to fit the screen responsively:

$(document).ready(function() {
      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {

       $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
    } );
  } );

This works perfectly on my computer when i resize the browser windows to match an iPhone resolution.

But when I try this on the actual iPhone, it works like this:

1. Tab containing datatable clicked - no redraw is done, fullsize datatable with no change
2. Another tab clicked, any tab
3. Back to tab on step 1 - NOW it worked and the table has been responsively resized

Why? As I said works perfect on PC (Chrome).

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.