Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slow scroll before header sticks with 20+ columns #73

Open
lopis opened this issue Oct 21, 2014 · 5 comments
Open

Slow scroll before header sticks with 20+ columns #73

lopis opened this issue Oct 21, 2014 · 5 comments

Comments

@lopis
Copy link

lopis commented Oct 21, 2014

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
Copy link
Owner

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
Copy link

mkoryak commented Oct 30, 2014

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: mkoryak/floatThead#101

@lopis
Copy link
Author

lopis commented Oct 30, 2014

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
Copy link

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
Copy link
Owner

jmosbech commented Dec 3, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants