What could cause DataTables to break on iOS devices (Safari)?

iLIKEtea

Hello community,

I am using DataTables for quite some time now in my ASP.NET Core Web App, with amazing results!

But now we have clients connecting from iOS devices (Safari), they started complaining about "there is no data down in the tables where there actually is data when I connect to the application via Chrome".

I decided to check out this issue and connect to the app on my own iPad. There I noticed that the DataTable is indeed 'broken'; it pretty much looks like a normal

<

table> element and no data is shown.

Any thoughts on this?

I am using

    <script type="text/javascript" src="/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-fixedcolumns-bs4/js/fixedColumns.bootstrap4.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-fixedheader-bs4/js/fixedHeader.bootstrap4.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-rowreorder-bs4/js/rowReorder.bootstrap4.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-scroller-bs4/js/scroller.bootstrap4.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-select/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css" />

Kind regards,

A starting dev

colin

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

iLIKEtea

I read the forum rules, I dont think its possible for me to re-create this. I Could take a picture of whats shown on a Chrome screen and whats shown on a Safari screen?

colin

Or link to your page, without seeing the issue, it's hard to solve...

Colin

iLIKEtea

Well I just noticed its working on Mac OS X ,but not on iPad, are you guys aware of any issues that invole this ? maybe I can start working from there, as you will need valid credentials to see the page