I'm seeing a weird issue and have spent a good bit of time trying to track it down, both through SO/blogs and finding an active issue in Chrome's bug tracker.
Link: https://jsfiddle.net/Lftwqh8p/1/
Issue: This only occurs in Chrome. In JS, I have a commented out line to switch between using the mixins. Both have their own issues with the same root problem.
Problem image:
So what we see is the width of the scrollbar
::-webkit-scrollbar {
width: 25px;
height: 10px;
}
directly effects how off-div the first column is. If we view this in IE or Firefox, we see this works as expected (Takes full width, or the column header is in the correct position).
If we remove the CSS for will-change: transform or the position: sticky, this will resolve the problem.
So I have a suspicion that this is a browser issue, and specifically is an issue with how Chrome renders these on Stacking Context or Compositing Layer. These both occur when position sticky is used and when will-change is set to transform.
I can't find any info on an issue like this because our use-case seems to be a bit specific to us, but is necessary (performance).
Any ideas on what the issue could be?
