Bug 36291 - Scrolling glitch on datatables with fixed header
Summary: Scrolling glitch on datatables with fixed header
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low major
Assignee: Baptiste Wojtkowski (bwoj)
QA Contact:
URL:
Keywords:
Depends on: 36130
Blocks:
  Show dependency treegraph
 
Reported: 2024-03-11 12:17 UTC by Tomás Cohen Arazi (tcohen)
Modified: 2024-10-22 07:55 UTC (History)
14 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 36291: Update fixedHeader to v4.0.1 (25.50 KB, patch)
2024-09-26 08:38 UTC, Baptiste Wojtkowski (bwoj)
Details | Diff | Splinter Review
Bug 36291: Update fixedHeader to v4.0.1 (25.58 KB, patch)
2024-09-26 19:03 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Tomás Cohen Arazi (tcohen) 2024-03-11 12:17:17 UTC
On testing bug 36130, I found that scrolling had some glitch (at least on my computer, Firefox on ARM64 macOS).

I used the following command to fill the DB with several batches:

```
PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 100 --entity ill
for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
```
Comment 1 Pedro Amorim 2024-03-11 12:47:27 UTC
Hi Tomas, thanks for this.
I'm unable to look at it properly but will as soon as I can.
It seems you're running 2 different commands, one for requests data and one for batches data.
This shouldn't cause any issue, but it's not something I've done before.
Comment 2 Tomás Cohen Arazi (tcohen) 2024-03-11 13:15:37 UTC
(In reply to Pedro Amorim from comment #1)
> Hi Tomas, thanks for this.
> I'm unable to look at it properly but will as soon as I can.
> It seems you're running 2 different commands, one for requests data and one
> for batches data.
> This shouldn't cause any issue, but it's not something I've done before.

Heh, I think I'm just used to run it before doing ILL things on my dev env.
Comment 3 Tomás Cohen Arazi (tcohen) 2024-03-12 18:37:04 UTC
Steps to reproduce:

1. Have a fresh KTD
2. Run:
   $ ktd --shell
  k$ bash <(curl -s https://raw.githubusercontent.com/ammopt/koha-ill-dev/master/start-ill-dev.sh)
  k$ cd
  k$ git clone https://github.com/ammopt/koha-ill-dev.git
  k$ cd koha-ill-dev/
  k$ sudo apt install libdata-faker-perl libtext-lorem-perl
  k$ PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 200 --entity ill
  k$ for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
3. Go to /cgi-bin/koha/ill/ill-requests.pl?method=batch_list
4. Scroll down
=> FAIL: Koha is your enemy!
Comment 4 Pedro Amorim 2024-03-13 15:58:00 UTC
Can reproduce (only on Firefox tho, it doesn't happen in Chrome). Firefox throws this console entry:
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 5 Slava Shishkin 2024-03-22 12:54:03 UTC
We probably have a very similar issue, with any DataTables elements with sticky header.

Here we found a reference from another reporter, even with video:
https://www.datatables.net/forums/discussion/74201
https://www.youtube.com/watch?v=u0_N_GRL--M

it's tricky to reproduce, it should be some coincidence of data/table size and window size, so this kinda of pixel-hunting sometimes, but it happens,
and it is present and reported by our librarians a lot.

We temporarily solved this by disabling "fixedHeader":

koha-tmpl/intranet-tmpl/prog/js/datatables.js
53:     "fixedHeader": true,

->

53:     "fixedHeader": false,

but this is only a workaround.
Comment 6 Michaela Sieber 2024-08-23 10:31:58 UTC
(In reply to Slava Shishkin from comment #5)
> We probably have a very similar issue, with any DataTables elements with
> sticky header.
> 
> Here we found a reference from another reporter, even with video:
> https://www.datatables.net/forums/discussion/74201
> https://www.youtube.com/watch?v=u0_N_GRL--M
> 
> it's tricky to reproduce, it should be some coincidence of data/table size
> and window size, so this kinda of pixel-hunting sometimes, but it happens,
> and it is present and reported by our librarians a lot.
> 
> We temporarily solved this by disabling "fixedHeader":
> 
> koha-tmpl/intranet-tmpl/prog/js/datatables.js
> 53:     "fixedHeader": true,
> 
> ->
> 
> 53:     "fixedHeader": false,
> 
> but this is only a workaround.


We agree, this seems to be a problem anywhere in Koha where  DataTables elements with sticky headers are used, for example when using batch deletion of items of a biblio (/cgi-bin/koha/tools/batchMod.pl)
Comment 7 Katrin Fischer 2024-08-23 14:42:39 UTC
I am moving this to the "Templates" component. I have confirmed the issue on the batch item edit page and seen it on others as well.
Comment 8 Fridolin Somers 2024-09-03 14:20:42 UTC
Changing importance to major because end of the page can not be accessed.
Comment 9 Fridolin Somers 2024-09-03 14:21:26 UTC
Can this be linked to Bug 35810 ?
Comment 11 Jan Kissig 2024-09-23 08:34:55 UTC
I confirm this issue for Firefox (Ubuntu). Chrome browser is not affected in my case.
Comment 12 Baptiste Wojtkowski (bwoj) 2024-09-23 08:38:56 UTC
according to this thread: https://datatables.net/forums/discussion/76463/missing-versions-or-fix-of-fixedheader-4-0-2, it looks like it should be fixed by upgrading fixedheader and one css change.

I tested it on my machine and this fixed the problem, we need to update the proper dependency in order to fix this one.
Comment 13 Baptiste Wojtkowski (bwoj) 2024-09-25 12:28:36 UTC
We have two choices, either try and update fixedHeader or work on Bug 36640 to update all debendencies
Comment 14 Katrin Fischer 2024-09-25 15:22:37 UTC
One sounds much bigger than the other. In terms of being able to backport - maybe we should do both?
Comment 15 Baptiste Wojtkowski (bwoj) 2024-09-26 08:38:46 UTC
Created attachment 171962 [details] [review]
Bug 36291: Update fixedHeader to v4.0.1

On testing bug 36130, I found that scrolling had some glitch (at least on my computer, Firefox on ARM64 macOS).

I used the following command to fill the DB with several batches:

```
PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 100 --entity ill
for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
```

In order to solve this bug, we decided to update fixedHeader to v4.0.1

TEST PLAN:

1. Have a fresh KTD
2. Run:
   $ ktd --shell
  k$ bash <(curl -s https://raw.githubusercontent.com/ammopt/koha-ill-dev/master/start-ill-dev.sh)
  k$ cd
  k$ git clone https://github.com/ammopt/koha-ill-dev.git
  k$ cd koha-ill-dev/
  k$ sudo apt install libdata-faker-perl libtext-lorem-perl
  k$ PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 200 --entity ill
  k$ for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
3. Go to /cgi-bin/koha/ill/ill-requests.pl?method=batch_list
4. Scroll down
=> FAIL: Koha is your enemy!
5. Apply patch and refresh cache from server
6. Go to /cgi-bin/koha/ill/ill-requests.pl?method=batch_list
Koha and you signed a peace treaty!
Comment 16 Baptiste Wojtkowski (bwoj) 2024-09-26 08:41:50 UTC
Note: From the patch, it looks like there are a lot of little changes, but the workflow for this update was: deleting the whole concerned part and replace with files found here: https://cdn.datatables.net/fixedheader/4.0.1/

//cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.js and //cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.css
Comment 17 Martin Renvoize (ashimema) 2024-09-26 19:03:15 UTC
Created attachment 172022 [details] [review]
Bug 36291: Update fixedHeader to v4.0.1

On testing bug 36130, I found that scrolling had some glitch (at least on my computer, Firefox on ARM64 macOS).

I used the following command to fill the DB with several batches:

```
PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 100 --entity ill
for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
```

In order to solve this bug, we decided to update fixedHeader to v4.0.1

TEST PLAN:

1. Have a fresh KTD
2. Run:
   $ ktd --shell
  k$ bash <(curl -s https://raw.githubusercontent.com/ammopt/koha-ill-dev/master/start-ill-dev.sh)
  k$ cd
  k$ git clone https://github.com/ammopt/koha-ill-dev.git
  k$ cd koha-ill-dev/
  k$ sudo apt install libdata-faker-perl libtext-lorem-perl
  k$ PERL5LIB=$PERL5LIB:./lib perl fake_data.pl --how-many 200 --entity ill
  k$ for x in {1..21}; do echo "INSERT INTO illbatches (name, backend, library_id, status_code, patron_id) VALUES ('$x', 'FreeForm', 'CPL', 'NEW', 52);"; done | koha-mysql kohadev
3. Go to /cgi-bin/koha/ill/ill-requests.pl?method=batch_list
4. Scroll down
=> FAIL: Koha is your enemy!
5. Apply patch and refresh cache from server
6. Go to /cgi-bin/koha/ill/ill-requests.pl?method=batch_list
Koha and you signed a peace treaty!

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 18 Martin Renvoize (ashimema) 2024-09-26 19:04:11 UTC
Works well for me, thanks Baptiste.

Signing off
Comment 19 Jan Kissig 2024-09-27 07:10:38 UTC
I applied the patch on ktd running main but the glitch still remains for me on 
http://localhost:8081/cgi-bin/koha/acqui/parcel.pl

What I did:
- created several orders but have not automated it yet
- on the given page parcel.pl with more shipments than the screen can show I try to scroll down but it still glitches
- yarn build
- flush_memcached
- restart_all
- still glitches when scrolling

Did I miss something?

Using Firefox 130 on Kubuntu
Comment 20 Baptiste Wojtkowski (bwoj) 2024-09-27 07:20:40 UTC
Hi,
Have you reloaded all caches from navigator ?
Can you please open a firefox console and type "fn.dataTable.FixedHeader.version" to check the update has been performed ?
Comment 21 Jan Kissig 2024-09-27 07:30:24 UTC
Cache should be emptied in browser as my WebDevTools were open with no caching acivated.

This is the output from fn.dataTable.FixedHeader.version

fn.dataTable.FixedHeader.version
Uncaught ReferenceError: fn is not defined
    <anonymous> debugger eval code:1
Comment 22 Baptiste Wojtkowski (bwoj) 2024-09-27 07:37:33 UTC
You get this on the glitching page ?
Comment 23 Jan Kissig 2024-09-27 09:19:41 UTC
unfortunately yes.
Comment 24 Jonathan Druart 2024-09-30 11:46:02 UTC
I think we should provide the min files here (datatables.min.css, datatables.min.js). They should be generated using DT's official website: 	

https://datatables.net/download/

FixedHeader Sticky header and / or footer for the table. v4.0.1
Comment 25 Jonathan Druart 2024-09-30 11:46:28 UTC
(In reply to Jonathan Druart from comment #24)
> I think we should provide the min files here (datatables.min.css,
> datatables.min.js). They should be generated using DT's official website: 	
> 
> https://datatables.net/download/
> 
> FixedHeader Sticky header and / or footer for the table. v4.0.1

Owen, can you please confirm this?