search

jmosbech / StickyTableHeaders

A jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling.
MIT License
906 stars 297 forks source link

Slow scroll before header sticks with 20+ columns #73

Open lopis opened 9 years ago

lopis commented 9 years ago

This plugin solved my problem with sticky table headers in IE but now Firefox lags behind significantly. Chrome doesn't have a problem, maybe because it doesn't have smooth scrolling. Although disabling SS in Firefox didn't quite remove the delay.

In Firefox, when the header is not yet sticky, the scroll has a delay of more than 0.5s. My table is a bit large, with 25 columns. Hiding some columns (display: none) makes the table fast again, so if you don't explicitly discriminate hidden cells, it might be just a rendering issue. I can't seem to point exactly the cause, but will try to analyze the code.

jmosbech commented 9 years ago

Thanks for chipping in. There is a known Firefox performance issue that I hope to get around to look at sometime. In the meantime all input is appreciated :)

mkoryak commented 9 years ago

I was looking at your code to see if I can help you in this regard, but I didn't see what I was looking for. Out of curiosity, why do you set min-width and max-width and not width on the columns?

I was looking for code where I could apply this lession: https://github.com/mkoryak/floatThead/issues/101

lopis commented 9 years ago

My code is not on github. It's behind an NDA but I'll try to create an example if I get the time. I don't know if this is part of the problem, but do you think it would be possible to disable the reset of the widths, by means of a user option? I already do it on my app in a way that better fits my table. I tried to do this myself, but I got a bit lost in the code. Might try again later. Oh, and thanks for that link.

Snapperfish commented 9 years ago

I was looking at the same problem in Firefox. There is a performance issue calculating notScrolledPastBottom. 1. The calculation is unnecessary if scrolledPastTop is false. With this fix, scrolling is responsive up to the point where the header is toggled. 2. The height of the clonedHeader should be cached. With this fix and a return immediately after, there is no slowdown. (The sticky header doesn't show, but it isolates the time to calculate the header height). 3. I also notice that the original header is the one displayed as fixed and turned on and off, while the cloned header is shown where the original one should be. I would have left the original one as is and copied widths etc. to the cloned one, but perhaps it does not make a difference. I could not find what takes so long to swap the display settings of the headers. Maybe if the cloned headers were added to another table?

jmosbech commented 9 years ago

Good points @Snapperfish . I will gladly land a PR if you have a few minutes to spare :)

Otherwise I'll see when I have time to get it done.