Table sticky columns scroll bug Chrome

Question

I created a table, where there are a couple of fixed columns, and the rest are scrolling. This is done using a wrapper div and setting position absolute and a negative left margin on the fixed columns.

It's part of a complex datatable so it's hard for me to recreate in jsfiddle, but here's a link: http://rateshopper.error404.ro/table.html

The problem is when you just play around with the scrolling and then move the cursor left. The fixed columns sometime just jump out of position. Unchecking and rechecking margin left in the inspector fixes it. I don't know why it happens.

Here's a video in Chrome: http://rateshopper.error404.ro/bug_chrome.mov

Any ideas or help would be greatly appreciated!

I can't recreate this issue on Windows with Chrome and FF (and can't watch your video). Which versions are you using? Which resolution? — mxlse, Aug 05 '16 at 14:37
I'm not sure multiple tbody is valid html, maybe the browser has a problem with that. — Carol McKay, Aug 06 '16 at 04:21
@CarolMcKay it validates but it is certainly unconventional. — JBartus, Aug 06 '16 at 11:04
UPDATE: I fixed it in FF by setting the left and top values, as it seems FF doesn't set default values. But it's still happening in Chrome. — Illes Peter, Aug 10 '16 at 14:13
In Chrome, it only happens on 1 Macbook Pro 13" late-2014, works on other devices running Chrome. I tried in incognito, disabling extensions, but nothing seems to do the trick. — Illes Peter, Aug 10 '16 at 15:45
If you test it in other machines and it doesn't fail (It doesn't in mine), it may be just some settings problem with that specific one. Just test on as many as you can and keep an eye on it. — DIEGO CARRASCAL, Aug 23 '16 at 11:04
It's a margin collapse issue, see my answer and: http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing — seahorsepip, Aug 23 '16 at 19:39

score 2 · Answer 1 · edited May 23 '17 at 10:33

Edit:

Better fix:

.col-lg-10 {
    float: right;
}

Setting a float on the parent element of #seriesTableWrapper prevents a margin collapse from occuring on it's children.

Here's a must read on margin collapsing: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

The article is a bit outdated in terms of methods to prevent margin collapsing but it explains why and how it happens well.

More modern ways to prevent margin collapsing: How to disable margin-collapsing?

Found a fix

Change:

#seriesTableWrapper {
    margin-left: *something*;
}

to:

#seriesTableWrapper {
    padding-left: *something*;
}

Probably a margin collapse issue, margins might collapse in some cases. Sadly the scrollbar extends now over the full width.

Since there is no vertical scroll you could just have made a table without scrolling and a table with horizontal scrolling next to it. And if there is vertical scrolling you could wrap both these tables in a div with overflow: auto;

score 1 · Answer 2 · answered Aug 06 '16 at 11:09

1

I was able to reproduce the appearance you show above by wildly resizing the window. I suspect that during resizing whatever you're using to set your initial left margin is returning null. Setting a minimum value for the left margin would likely solve this issue. If you can provide the javascript that calculates and applies those positions I will happily aid you in editing it.

answered Aug 06 '16 at 11:09

JBartus

440
3
10

Did you try replacing the margin-left auto with a calculated value? – JBartus Aug 11 '16 at 01:59
I set margin-left at line 662. At line 608 I just reset it. Setting of the left-margin is done on page load. After I scroll in that div and move the cursor outside, the cells jump on Chrome (and only on 1 particular Macbook, it's ok on others). BUT, what's interesting is that through inspector, I can see the correct values, and if I check and uncheck it goes back to proper rendering. – Illes Peter Aug 11 '16 at 08:40
Not to harp on the obvious but... is that Macbook's version of Chrome updated? – JBartus Aug 12 '16 at 07:48
Sadly it is. v52.0.2743.116, and on my 2013 Macbook I've got the same one, down to the smallest build number. Of course the Macbook we've got problems with, is our clients Macbook :-( – Illes Peter Aug 12 '16 at 08:53
Tried checking out its Extensions? – JBartus Aug 19 '16 at 05:10
Tested on chrome lastest version windows 10 and it also happens here, though it takes some random clicking, dragging, scrolling etc. – seahorsepip Aug 23 '16 at 19:09
How is this a correct answer if it does not solve the issue? Neither is any margin-left value incorrectly set when the issue appears. – seahorsepip Aug 23 '16 at 19:32

score -1 · Answer 3 · answered Aug 19 '16 at 13:39

Well this works fine on my end, It aappears to work fine on other peoples computers, yet it only appears to happen on one particular macbook, albeit it would be the macbook that you created it on, i suppose...

If that is the case then you need to wipe your browser cache, although it is most likely local, it still stores a cache. Try this...

Open Chrome. On your browser toolbar, tap the 3-dot icon . Tap History, and then tap Clear browsing data. Under "Clear browsing data," select the checkboxes for "Cookies and site data" and "Cached images and files." Use the menu at the top to select the amount of data that you want to delete. ... Tap Clear browsing data.

Try and clear "EVERYTHING", I have had similar issues to this before while developing and it is because of the cache i have found, I dont know if this will solve your problem but i think it would be the first place i look.

Just read the last comment about it being your clients Mac, I would still recommend wiping the cache, and checking the extensions he may have as suggested in the last comment

I already tried all that, disabling extensions, even reinstalling Chrome. Nothing helped. — Illes Peter, Aug 22 '16 at 08:02
Well it wasn't meant to criticise, sometimes we over look the simple stuff when looking hard at the technical stuff — Ricky, Aug 24 '16 at 05:13

Table sticky columns scroll bug Chrome

3 Answers3