Misaligned rows in Fixed columns when scrolling Y

roipatrick

I used datatables fixed columns but on load my rows are not aligned. At first it was a tiny bit misaligned but as I scroll, the row misalignment becomes more and more misaligned.

On load this is what it looks like (note: the first two columns are the fixed columns)
1st photo
then if I scroll vertically at the bottom notice that the rows are not aligned at all
2nd photo

jrssnyder

I have the exact same issue. Anyone have any thoughts on how to resolve this?

kthorngren

Does this example work for you?
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html

Can you post a link to your page or a test case showing the issue?

Kevin

jrssnyder

Thank you for taking a look at this. The issue is most pronounced with Internet Explorer. Please use that browser and go to this URL: http://76.113.249.108:8081/tmpFixedColTest/
Login with "username9" and anything for the password.
Once you are logged in, go to the "Published Schedule" tab, select the date ranges from 11/19/2017 to 12/16/2017 (the default right now), and then click on the "View Posted Matrix" button. Scroll to the bottom of the first table to see the misalignment.

Here is the javascript used to create the table:
self.eeMatrixTable = $('#tblEeMatrixData').DataTable({
scrollY: "500px",
scrollX: true,
scrollCollapse: true,
paging: false ,
fixedColumns: {
leftColumns: 1
// heightMatch: 'auto' // did not help with alignment issue
}
});

I will leave the site up for a week or so...

allan

Thanks for putting the page up. I see a 1px shift in IE, but it doesn't get worse as I scroll.

I'm having trouble inspecting elements on your page in IE. What was the page that you were using for the screenshots in your original post? That looks like one of the DataTables demos.

Allan

jrssnyder

I never posted any screenshots - the posted images were from roipatrick.

jrssnyder

I don't see any shift before scrolling, but after scrolling I do. Screenshots from my instance of IE are below:

allan

That's a slightly larger shift than that which I am seeing on your page - perhaps 2px? I'm afraid I'm struggling to run the IE debugger on that page. If I can, I'll try to extract the table later in the week and debug it on a slimed down page, or if you are able to do that, it would help the debugging process.

Thanks,
Allan

jrssnyder

The same issue appears in Chrome and Firefox, but it is less pronounced. I think Chrome debugging tools are much better than IE, so maybe you could use Chrome to debug -? Thanks for looking into this.

allan

They are and they are a heck of a lot faster. I see the 1px shift right at the end of the table when I scroll all the way down. The rows are in alignment at all other times in Chrome.

It looks like a sub-pixel rendering error. The main table is .334px smaller for me than the cloned table.

Allan

jrssnyder

Unfortunately, the issue is much more pronounced on some client sites. I don't know why that would be. Anything you could suggest?

allan

Not sure I'm afraid. Do you have a link to a page showing the more pronounced issue?

Thanks,
Allan

Ahaffey

Hey allan, i've been receiving this issue ( i think it's the same issue) with the table on my website, but am having difficulties making a jfiddle for it. I do however, have a video of a dataTable example from this website on the FixedColumns page that highlights the issue, it's only 2.1mb, but this form won't let me attach it.

Is there another way I can go about sending this to you to show what the issue is? Alternatively, I can explain how to reproduce the issue, or at least how I can reproduce it:

Step 1: Navigate to this example: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

Step 2: Deselect the web browser(by having the priority program be a different application, clicking on the desktop, etc).

Step 3: Without clicking on the page, move the mouse icon over each different column within that table and attempt scrolling vertically. There should be one column that when scrolling can control the other two, but the rest will scroll independently if hovering over them.

Sorry if i couldn't explain well, if there's something I can do to better highlight the issue, or if you want the video I have that shows the issue on this website, I can provide that.

Edit: This is also reproducible on my end on all web browsers I've tested(Chrome, Firefox, Safari, IE).

allan

Thanks for your feedback on this. What OS are you using? It sounds like the mouse over events aren't happening when the window doesn't have focus. I've just tried it locally (Fedora) and it seems to work no problem.

Thanks,
Allan

Ahaffey

I'm using OSX, however, testing it on Windows 10 can show the same misalignment by attempting to scroll when hovering over either column (fixed or not) and while it's scrolling, move the mouse to a different column. That was both with focus and without focus, but regardless of focus, if I attempted to scroll again without moving the mouse, it would snap back into place.

allan

and while it's scrolling, move the mouse to a different column.

That I think would do it. If there is momentum scroll I can see that there might be a problem there.

Allan

SiulAM

...