Selecting a Row on an iPad throws the user to the top of the page and kills scrolling

IMS_Pete

Hi All,

Sorry for the tome below, I cant post the page so have given as much info as possible.

I'm wondering if anyone has had this issue on an iPad:
DataTables initialises well and works correctly however once I have a few entries with some sizable text entered (400 char per row; 5 or 6 rows) if you select a row (simply touch the row selector checkbox) the screen gets pushed to the top of the page and scrolling no longer works. The only way back to normal operation is for the user to either reload the page or as a work around toggle the child row of the only visible table row. I suspect this is due to that action causing a redraw event.

The page works fine on desktop, no issues at all. On an iPad works most of the time until there is a chunk of text.

I've connected an iPad to a MacBook and used the WebInspector function to see if there are any events happening when this occurs but I get nothing. I thought it might have something to do with the onscreen keyboard (just guessing) but this happens when selecting a row rather than editing a field. Replicatable with rows being entered with the text " Test " repeated 100x

I'm not able to post the whole page (Sensitive data) but I can post specific setup components. For example I'm running with the following extensions:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//extensions/Editor1.7.4/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.3/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="//extensions/Editor1.7.4/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>

I've also tried different versions of editor back to 1.5.6 but no effect.

Any help as to what to check next would be most appreciated.

allan

That's not something I've come across before I'm afraid. Are you able to recreate the issue on JSFiddle, CodePen or http://live.datatables.net without the sensitive data?

Thanks,
Allan

IMS_Pete

Hi Allan,

Thanks very much for getting back to me. I began setting up a replication of our issue on live.datatables.net however the powers that be have decided to hold off on this issue for the time being. Once I'm authorised to spend effort replicating this issue I'll get back to you.

Very sorry for wasting your time.