Bug 37024

Summary: Scrolling "glitch" for some tables with sticky headers (that use DataTables)
Product: Koha Reporter: Laura Escamilla <Laura.escamilla>
Component: CirculationAssignee: Lucas Gass (lukeg) <lucas>
Status: In Discussion --- QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: andrew, bdaeuber, blawlor, carthur, chlee, cmurdock, danielle.elder, david.roberts, david, dch, emily.lamancusa, ephetteplace, gmcharlt, janet.mcgowan, jonathan.druart, jrobb, karie.straube, kebliss, kyle, lucas, m.de.rooy, martin.renvoize, mspinney, raymund.delahunty, rcoert, rpalermo
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=36291
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40816
GIT URL: Initiative type: ---
Sponsorship status: --- Comma delimited list of Sponsors:
Crowdfunding goal: 0 Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
This fixes scrolling on some staff interface pages that have "sticky" headers for tables (for some browsers). For example, when scrolling down the circulation and fine rules page using a Chromium-based browser, the main table with the sticky header is initially difficult to scroll past and "jumps/flickers" a little before letting you scroll down the rest of the page.
Version(s) released in:
Circulation function:
Attachments: Bug 37024: Fix dataTable scroll glitch
Bug 37024: Fix dataTable scroll glitch

Description Laura Escamilla 2024-06-04 13:13:01 UTC
Similar to bug 36291, the holdings table is also glitching during scrolling. I'm seeing the following message in the console log:

"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!"
Comment 1 Owen Leonard 2024-06-04 18:38:20 UTC
That warning will show up on any page that uses HCSticky as far as I know, and doesn't necessarily indicate an actual problem with the page.
Comment 2 Benjamin Daeuber 2025-07-09 21:40:33 UTC
I think this is still occurring in 24.11, even after the DataTables update. It may a separate issue, but staff have reported it here on long holdings tables.
Comment 3 Jason Robb 2025-07-17 18:13:59 UTC
I've gotten lots of reports of glitchy scrolling recently, possibly coinciding with 24.11.05.

It only happens in Chrome (my current Version 138.0.7204.158).

It seems to happen any time a table header wants to stick as you're scrolling down the page.

I was able to recreate it on Main in ktd by adding some holds then running the holds queue (10 rows seemed to be a sweet spot that really fired it up).

When you try to scroll slowly, it jerks the page back up. If you scroll quickly it can sometimes get over the bump.
Comment 4 Cindy Murdock Ames 2025-07-21 19:52:57 UTC
Not sure if this is helpful or even the same issue, but we've been experiencing this lately on 24.11 on our staff computers in Chrome (although I've been unable to replicate it myself).  Apparently it's been happening for a while so I'm not sure if a recent Chrome update has triggered or worsened it.  Anyway, a colleague found while checking things out in Chrome's developer tools that if you disable this (under Styles) the problem disappeared:

:root {
font-size: var(--bs-root-font-size);
}

That line is from /usr/share/koha/intranet/htdocs/intranet-tmpl/prog/css/staff-global.css


I have no idea how to disable that permaenently or if doing so is the correct thing to do or entirely reckless, but I'm putting it here in case someone in the know finds that this is the correct rabbithole to go down.  ;)
Comment 5 rpalermo 2025-07-22 15:10:12 UTC
I'm noticing the same behavior when scrolling on items, checkouts and also holds using the Edge browser. It also seems that the mouse needs to be positioned within the table to experience this issue. When moving the mouse off the table to the left, I don't see the same behavior.
Comment 6 carthur@slolibrary.org 2025-07-23 18:02:42 UTC
+1
Comment 7 Rebecca Coert 2025-07-23 18:03:07 UTC
+1
Comment 8 Lucas Gass (lukeg) 2025-07-23 20:23:28 UTC
I've tried my hardest to recreate this issue and cannot. I've tried k-t-d and production sites that are reporting the problem. I have tried Ubunutu and Windows. I have tried Chrome and FF. I can't recreate this.
Comment 9 Andrew Fuerste-Henry 2025-07-24 12:31:16 UTC
I can recreate on a fresh up-to-date KTD in Chrome version 138.0.7204.169 but not in Firefox version 141.0.
Comment 10 Cindy Murdock Ames 2025-07-24 15:23:02 UTC
An addendum: I was finally able to replicate it myself on my in-library work computer, which has more similar specs to our other staff computers.  This one has an Intel CoffeeLake-S GT2 UHD Graphics 630 graphics card, using the i915 driver, as do probably most of our other staff computers.  The one in my home office, where I couldn't replicate it, I think has an Nvidia Quadro 4000.

My colleague couldn't replicate it on his laptop on Chrome 138.0.7204.157, but he updated to 138.0.7204.168 and it started happening.

If I scroll slowly with the mouse scroll button it jumps all over the place, but if I scroll faster it gets past it.  If I use the page up/page down buttons on the keyboard it doesn't do it at all.

I'm wondering if it's an unfortunate combination of video hardware &/or driver plus the latest version of Chrome where it's most likely to happen.

Also the workaround someone mentioned in Edge where it wouldn't do it if you scrolled off to the left of the table doesn't work on Chrome.
Comment 11 Lucas Gass (lukeg) 2025-07-25 22:09:58 UTC
-This only seems to be reported in Chrome.
-An on scroll event is being triggered and reseting the `.dtfh-floatingparent` element to `top: 0`, which creates the flicker. 
 
It seems like we can mostly work around the issue by adding the following CSS:

.dataTable thead {
    position: sticky !important;
    top: 0 !important;
}


My question, is there anything fixedHeader is doing that cannot be done with CSS position sticky which now has wide browser support?
Comment 12 Jonathan Druart 2025-07-28 13:16:46 UTC
It would be worth trying with a newest version of DataTables.
Comment 13 Emily Lamancusa (emlam) 2025-07-28 21:02:32 UTC
I reproduce this on main and 24.11.02 in Chrome (I'm also on version 138.0.7204.158), and I confirm that Lucas's CSS snippet fixes it for me. (Thanks, Lucas!)
Comment 14 David Roberts 2025-07-28 21:33:05 UTC
Some of our customers have reported this in Edge too. The problem happens where the 'banner' reaches the top of the screen and Koha is reluctant to let the scrolling continue. There are a few seconds of juddering before the remainder of the long page flows under the banner that has reached the top of the page. There is often a difference in behaviour between using the mouse wheel, and the arrows at the top and bottom of the scroll bar in the browser.
Comment 15 Brendan Lawlor 2025-07-29 15:27:34 UTC
Our libraries just reported this in 24.11.06

Thanks for the css fix Lucas!
Comment 16 Katie Bliss 2025-07-29 20:15:52 UTC
I've seen this in Edge as well, though I went to go test again and can't actually reproduce it anymore. So perhaps no longer an issue in that browser?
Comment 17 Martin Renvoize (ashimema) 2025-08-27 20:46:03 UTC
Any more thoughts on this?  We've added the CSS fix from Lucas to our xCSS preferences for a number of our sites now reporting this.. but it would be good to have a core fix
Comment 18 Jonathan Druart 2025-09-02 07:45:56 UTC
(In reply to Martin Renvoize (ashimema) from comment #17)
> Any more thoughts on this?

First thing should be to confirm it's not fixed upstream.
Comment 19 Andrew Fuerste-Henry 2025-11-05 20:14:16 UTC
(In reply to Jonathan Druart from comment #18)
> (In reply to Martin Renvoize (ashimema) from comment #17)
> > Any more thoughts on this?
> 
> First thing should be to confirm it's not fixed upstream.

I can confirm this still exists in main. I'm most often seeing it in the circ rules (/cgi-bin/koha/admin/smart-rules.pl).
Comment 20 Andrew Fuerste-Henry 2025-11-05 20:18:18 UTC
(In reply to Andrew Fuerste-Henry from comment #19)
> I can confirm this still exists in main. I'm most often seeing it in the
> circ rules (/cgi-bin/koha/admin/smart-rules.pl).

In Chrome Version 141.0.7390.123 on a mac.
Comment 21 Lucas Gass (lukeg) 2025-11-05 20:25:10 UTC
Created attachment 189138 [details] [review]
Bug 37024: Fix dataTable scroll glitch

To test:
1. Observe the glitchy scroll behavior describe in this bug report.
2. Apply patch, yarn build
3. The scroll glitch should be gone
Comment 22 David Nind 2025-11-05 21:41:28 UTC
Created attachment 189140 [details] [review]
Bug 37024: Fix dataTable scroll glitch

To test:
1. Observe the glitchy scroll behavior describe in this bug report.
2. Apply patch, yarn build
3. The scroll glitch should be gone

Signed-off-by: David Nind <david@davidnind.com>
Comment 23 David Nind 2025-11-05 22:20:44 UTC
Testing notes (using KTD):

1. Tested on an Ubuntu 22.04 desktop, using Chromium, Firefox Developer Edition, and Google Chrome (latest versions),

2. Tested the circulation and fine rules page (Koha administration > Patrons and circulation > Circulation and fine rules).

3. Before the patch:
   - Chromium: jumps/flickers
   - Google Chrome: jumps/flickers
   - Firefox Developer Edition: no issues, scrolls as expected

4. After the patch:
   - Chromium: now scrolls as expected
   - Google Chrome: now scrolls as expected
   - Firefox Developer Edition: no change, scrolls as expected
Comment 24 Jonathan Druart 2025-11-06 07:52:59 UTC
(In reply to Andrew Fuerste-Henry from comment #19)
> (In reply to Jonathan Druart from comment #18)
> > (In reply to Martin Renvoize (ashimema) from comment #17)
> > > Any more thoughts on this?
> > 
> > First thing should be to confirm it's not fixed upstream.
> 
> I can confirm this still exists in main. I'm most often seeing it in the
> circ rules (/cgi-bin/koha/admin/smart-rules.pl).

by upstream I meant in newer DataTable version.
Can you try bug 40816 maybe?
Comment 25 David Nind 2025-11-06 17:36:22 UTC
(In reply to Jonathan Druart from comment #24)
> (In reply to Andrew Fuerste-Henry from comment #19)
> > (In reply to Jonathan Druart from comment #18)
> > > (In reply to Martin Renvoize (ashimema) from comment #17)
> > > > Any more thoughts on this?
> > > 
> > > First thing should be to confirm it's not fixed upstream.
> > 
> > I can confirm this still exists in main. I'm most often seeing it in the
> > circ rules (/cgi-bin/koha/admin/smart-rules.pl).
> 
> by upstream I meant in newer DataTable version.
> Can you try bug 40816 maybe?

I tried bug 40816 (apply patch, yarn build, restart_all) and the issue still exists.
Comment 26 Marcel de Rooy 2025-11-07 08:56:42 UTC
With this patch and yarn build, I still saw some glitchy behavior when scrolling down slowly from the start of the table with 10 longer rows on the admin/branches page.
Comment 27 Marcel de Rooy 2025-11-07 08:57:28 UTC
(In reply to Marcel de Rooy from comment #26)
> With this patch and yarn build, I still saw some glitchy behavior when
> scrolling down slowly from the start of the table with 10 longer rows on the
> admin/branches page.

In Chrome Version 142.0.7444.60
Comment 28 Marcel de Rooy 2025-11-07 09:06:08 UTC
Probably we should adjust the title of this report. Since it is a more generic thing.
Comment 29 Marcel de Rooy 2025-11-17 10:19:53 UTC
Moving to In discussion. This needs more testing or further changes.