Scrolling Column Misalignment After ~20min of use

curiou

I have a very strange issue where after about 20 - 30 min of the page being active:

1. The table's columns become misaligned with the table body on horizontal scrolling. The misalignment is only while scrolling and fixes itself once you stop scrolling.
2. My fixed columns become misaligned with the rest of the rows while vertically scrolling. The misalignment is only while scrolling and fixes itself once you stop scrolling.

The column alignment is fine for the first 20-30 min of the page being active and I don't have any functions on an interval set to go off after this time period has passed. Once the issue occurs, I can only fix it by taking down the docker container and creating a new one. No amount of reloading the resources/page fixes the issue once it occurs.

Generally I'd post a test case, but at this stage there are far too many variables at play (and I can't post the full table). But I am hoping that this issue sounds familiar to anyone and that you might have troubleshooting tips?

Below are some basic relevant settings for the table:

scrollY: "50vh",
scrollX: true,
scrollCollapse: true,
fixedColumns: {
   leftColumns: 2
},

The table also has a large number of columns (90), some of which are hidden initially when loading the page (can unhide using a colvis dropdown). And using DataTables 1.10.20 with Bootstrap 4 styling.

Thanks

colin

No, that's not a known problem. I have a table that I use throughout the day and I've not seen it, so it's likely to be something in your configuration/setup. If you're able to pin it down, we'd be happy to take a look,

Colin

curiou

Thanks Colin. While I haven't been able to precisely pin it down, I have noticed some additional details that might sound familiar to someone more experienced with datatables than I am:

1. The issue is not limited to every 20-30min; it comes up sporadically. Sometimes the issue is there when opening the page but goes back to normal after 20min or so (and stays improved for some time, even after page reloads, etc.).
2. Creating a new docker container no longer fixes the issue when it comes up (it was just a coincidence).
3. When horizontally/vertically scrolling it is as if the browser is struggling to keep up with recalculating in order to keep the header/footer/fixed column aligned with the rest of the table body. But as soon as you stop scrolling, everything snaps back and looks normal.

For #3, I only have 2 event listeners on scroll and even when those are removed, the alignment lag continues when scrolling. If this sounds familiar, any help would be appreciated.

Thanks