Missing versions (or fix) of FixedHeader? 4.0.2?

lisarush

We were previously using DataTables with jQuery-UI. Last year, we had an issue with FixedHeader & the screen jumping vertically back to the top (unable to scroll down). Allan resolved this issue February 2022, see https://datatables.net/forums/messages/4274/#Item_24.

We have now migrated to using Bootstrap with the latest DataTables release. The issue has re-appeared & is very easy to reproduce on our system.
In the linked chat, he had mentioned the fix being in version 4.0.2, which I do not see.
(at the time of the fix, we just rolled with using the Nightly version -- but now, of course, would like to use the official released version)

We are seeing this issue on Firefox, Chrome, and Safari on a MAC.

Any thoughts?
Sincerely,
-- Lisa

lisarush

Little further investigation...
* I compared the code we had before/after the fix last February -- compared to the latest we have now. At first glance, it appears like those changes are in the latest we have now. (maybe there was never a version 4.0.2 of FixedHeader, and the changes got rolled into a diff version#)
* Confirmed that this is always happening on Windows machines.

allan

Hi Lisa,

Good to hear from you again. Upgrading to Bootstrap sounds like a good move to me - I've been considering dropping the jQuery UI styling for DataTables as it is little used now. Not at that stage yet, but it will happen sometime.

Anyway, regarding the issue you are seeing, I think it is the same as has been reported here. If so, this issue isn't quite as bad has the original one - it flickers a bit but you can scroll down the table with a little persuasion? If I recall correctly, before it was really bad.

Digging into it, the issue I think it caused by the use of the following CSS in Bootstrap 5:

@media (prefers-reduced-motion: no-preference)
:root {
  scroll-behavior: smooth;
}

That's why we don't see it in other styling frameworks.

The fix, slightly ironically is to actually partly remove the fix I put in last year! It was interfering with smooth scrolling, which browsers now have running in its own thread so it can be nice and smooth. The Javascript thread was caching a value (while the scrolling was still happening) and then setting it again. That wasn't a problem when it all happened in sync, but it is now!

The nightly has this latest update. I'll be doing a series of releases soon, of which this will be part.

If you could try the nightly and let me know how you get on, that would be great.

Thanks,
Allan

lisarush

Hey! This did not fix the issue for us.
And actually, the issue this time is much worse. Last time, it only happened in cases where the window height was really close to the height of the table. Now, it happens much more often and is very easy to reproduce on all browsers!

And yes, the move away from jQuery UI was long overdue.

lisarush

To help debugging this:
* I tried disabling the scroll-behavior: smooth; value & this did NOT change the behavior. Still jumping back to the top. (I also tried all other possible values of this attribute, with no difference.)
* It does seem related to how closely the height of the table is to the height of the browser window. (just a much bigger range than we experienced last time)

Happy to help with any testing, if there's anything I can do.

allan

Hi Lisa,

I've just tried to replicate the issue here: https://live.datatables.net/xevitemo/1/edit . Unfortunately it seems to be working okay (minus a little offset at the top - which I'm reasonably sure is unique to the live page).

Are you able to give me a link to a page that demonstrates the issue so I can look into it?

Thanks,
Allan

lisarush

If I remove your recent fix (from earlier today) AND disable scroll-behavior: smooth; -- it does stop jumping. (I haven't done super-extensive testing yet, but it does seem to fix it.)

I tried removing that CSS value for just .dataTables_wrapper, but no luck.
If I remove it globally (:root), it does fix the problem -- which is a good enough fix for me, as I do not need (though, it might be nice at some point) the smooth scrolling from Bootstrap.

(Bootstrap does have an sccs setting to change this behavior: $enable-smooth-scroll.)

---

On a personal note, we will be in Scotland next week & the week after on vacation! May be driving by you on the 21st.

allan

scroll-behavior is for the whole page, so it would need to be applied globally.

Annoying that removing my fix fixes it . If you are able to give me a link to a page showing the issue, that would be really helpful in debugging it. With Bootstrap 5 locally, my fix was spot on earlier, so I'm wondering what else might be at play here.

One variable is that I'm not using a Mac - I'll grab one and try it shortly.

Awesome to hear you'll be in Scotland soon - doing the full tourist route!? Are you heading to Perth area at some point?

Allan

lisarush

I'll see if I can come up with a page for you, but I may not get to it today -- last day before vacation... and it's hard to isolate all the pieces out.

We do see the issue on both MAC and Windows. On MAC, with Firefox, Chrome, and Safari. On Windows, with Firefox (didn't try others).

Yes -- Edinburgh, Wigtown, Glencoe, Isle of Skye, Inverness, back to Edinburgh. Probably driving thru Perth on the way back to Edinburgh -- tbd on exact itinerary.

allan

Does my live example ( https://live.datatables.net/xevitemo/1/edit ) work okay for you on a Mac? I've just tried it and it seemed to be okay. I'll try another version when I get home.

Hope you have a great holiday!

Allan

kthorngren

I haven't followed this thread so not sure the problem description but I see this on a Mac with Chrome:

There is a bit of the table shown above the header.

Kevin

allan

Yeah - I see that on the live site as well - I think it is specific to its offset at the top. On a non-live page do you see it as well?

Allan

lisarush

Back from vacation... Scotland was lovely. Though my daughter was a little disappointed it wasn't grayer/rainier -- it was sunny all but one day! But, we had a great time. I might have taken a few pictures of sheep (not so common here). ;-)

Just checking in...
Your live example works fine, no issues. And I do see the same behavior Kevin mentioned in Chrome on a Mac.

Things are busy jumping back into work after 2 weeks gone... and since the scroll-behavior is a good work-around for me... I'm not sure how soon I can try to get you a working example. I will see if maybe I have some time late this week.

All the best,
Lisa

allan

It has been stunning weather here recently. Still plenty of midges though... Excellent to hear that you enjoyed it!

I might have taken a few pictures of sheep (not so common here). ;-)

Haha - on my cycle home at nights, I can often get caught in "local traffic" - i.e. the shepherd moving sheep between fields, causing some delays to my trip

Good to hear the example is behaving, minus that offset. I'll dig into that more.

If you do get a chance at some point to recreate the original issue, I'll take a look into it in more detail. For the moment we'll go with the workaround.

Allan