horizontally fixed column is lagging on IE

Question

Im trying to build comparison table from vertical lists. Main goal is that first column must be fixed horizontaly only and horizontal scrollbar must be visible on screen all the time. I want to easy compare rows of first column with corresponding rows from other columns

like here jsfiddle example

I've managed to do this by using position absolute on 1st column and changing its css left property on scroll event.

$('#container').scroll(function() {
        $('#main').css('left', $(this).scrollLeft());
    });

That solution works fine except IE. On IE my fixed column is lagging and changing position is not smooth. I'm trying to fix it but i've run out of ideas for solution.

Answer 1

A part of the problem might derive from the fact that attaching anything to the scroll event can be quite heavy, just attaching a console.log() to it can be enough to understand the amount of calls.
You should give a try the solutions proposed in this thread, which will surely make it lighter on other browsers apart from IE as well.
I know you're searching for smoothness, you could animate the left property instead of changing it instantly, or finding a way to only do the smooth transition on IE, keeping it as is in the other browsers.
One other thing you could try would be will-change, but sadly it's not supported by IE. You could try giving transform:translate3D(0,0,0) to #main to trick the browser into using hardware acceleration, which might raise the performance on IE11.

--EDIT Another thing that came to mind:
I can see you need to have the div absolutely positioned and not fixed since you need to scroll down while keeping it aligned with the other tables. Couldn't you use JS to give it position:fixed while scrolling horizontally and go back to absolute when the user scrolls vertically or stops scrolling horizontally?