Scroller + Responsive Performance

tjd

Hello,

I'm working on a project that uses DataTables and the combination of both the Scroller and Responsive (Bootstrap) extensions are exactly what I need to do.

The only issue I find is when resizing the browser window the performance is terrible, causing my browser to become very laggy while dragging to a new size. I am aware this is going to be something to do with a window resize event being captured and recalculating widths and if columns should be visible etc. I also understand the main point of responsive is to not constantly resize the browser window to watch the site resize, but to possible resize once on load, to make sure the site is displaying correctly on the screen size it is loaded on.

My main question is there any way to increase the performance or maybe only have the table recalculate once resizing is complete or maybe not on every pixel resized?

I have created a jsfiddle with an example https://jsfiddle.net/6zbqdqkm/ if you either resize the browser window or move the middle divider you will see the issue. The jsfiddle is just 2 examples from the DataTables website merged.

Edit: I have also noticed that sometimes the columns become out of sync with the headers

Thanks in advance for any help on this.