Sticky header lags / stutters with wrapper in IE / Edge

[Hisstsu]

Hello,

When using sticky headers with Internet Explorer or EDGE it lags when scrolling if you use a wrapper.

you can see it here(Internet Explorer): https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html#table2 and here (EDGE): http://jsfiddle.net/x3Lvb45c/

can there somthing be done?

[Mottie]

Hi @Hisstsu!

I've seen this issue pop up a few times in the past - ie10/chrome (#1018 & #1557) & os x (#1442) - I have yet to find a solution.

I can't tell which sticky headers widget you're using, but try the other one:

• stickyHeaders - makes a copy of the table header and makes it sticky
• css3 stickyHeaders - uses css3 transforms to make the table header sticky

[Hisstsu]

Hi Mottie,

Thanks for the fast reply. Tablesorter is really great. In my Solution I am using stickyHeaders. I did not manage to get cssStickyheaders to work.

If you open the cssStickyHeaders Demo Page with Internet Explorer all the Table headers lagging, not only the wrapper one. So my hopes are not that big that cssStickyHeaders will work properly.

Maybe Microsoft will some day make a good browser... :)

But Thanks for the help. Maybe you find a solution some day. If there will be an update i am looking forward to it!

[jjxtra]

I've also had no luck getting either stickyHeaders or cssStickyHeaders to work, they always scroll off the screen. If I use stickyHeaders_attachTo: 'body' they appear in the middle of the table and scroll down in a funny way... weird.

[Mottie]

Hi @jjxtra!

Make sure that the attachTo element has a position: relative css definition applied to it.

[djugan-wve]

Now that position: sticky; is supported on th and td elements in most browsers ( except IE, of course), it can be used to implement sticky headers . I have attached a simple widget named positionStickyHeaders that illustrates how this can be done. I'm sure the widget needs some refinement to handle more situations, but it works much more smoothly in Edge (non-chromium) than either the existing stickyHeaders or cssStickyHeaders widgets. [Edit 07-MAR-2020] replaced attached widget with refined version. widget-positionStickyHeaders.zip

[flackbash]

I'm having a similar issue on Firefox 95.0.2 (64-bit) for both versions, stickyHeaders and css_stickyHeaders, for the Attach sticky header to its parent use case.

Additionally, I'm getting this console warning, which sounds like it has to do with the issue:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html for further details and to join the discussion on related tools and features!

Would be great if this was solved.

In general, tablesorter seems awesome, thanks for making this great plugin :)