Table row position and height incorrect at first drawCallback of ajax sourced data (only in Firefox)

sunbathingseal

I have a problem with rows in datatables having the wrong jquery position().top and height at the first drawCallback() after fetching data in Firefox (works fine in IE and Chrome). At least with ajax sourced data. Example:

<table id="table">
  ...
</table>

<script>
  $("#table").DataTable({
    ajax: <ajax source>
    ...

    drawCallback: function(settings) {
      let api = this.api();
      if (api.data().count() > 1) {
        // Select any row
        let row = api.row(1);
        let rowSelector = $(row.node());

        // Here top and height have wrong values
        let top = rowSelector.position().top;
        let height = rowSelector.height();
      }
  });
</script>

Sometimes the values are too small, sometimes too large. It seems like Firefox is doing some additional formatting of the table elements sometime after the first drawCallback after the ajax fetch. Redrawing the table fixes the problem, so my current workaround is adding a small timeout after the ajax sourced data is fetched and doing a redraw. Any better ideas how to fix this?

JSFiddle reproducing the problem (in this particular case I use the top and height properties of the row to put an overlay div on top of it, which does not work for the first draw in Firefox. Try searching for any value in the search box and the table will redraw, fixing the issue):

https://jsfiddle.net/w6dnorhv/9/

colin

Hi @sunbathingseal ,

It's because the draw would occur before the table is fully formed. If you add an additional draw() into initComplete everything works as expected - see here.

Cheers,

Colin