starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[Bug]: When scrolling through episodes in a podcast the listing of items disappears #2310

New Issue
Closed
opened 2026-04-25 00:05:58 +02:00 by adam · 12 comments
adam commented 2026-04-25 00:05:58 +02:00
Owner
Copy Link
Copy Source

Originally created by @kevinclevenger on GitHub (Oct 14, 2024).

What happened?

  • Scroll down through the episodes of a podcast
  • The number of episodes diminishes until none are visible

What did you expect to happen?

  • Be able to see the text of all the episoides

Steps to reproduce the issue

  1. Select a podcast from Library
  2. Begin to scroll down through the episodes
  3. Visible episodes become fewer and fewer until completely gone
  4. At that point it's not possible to select an older episode

(see attachments)
2024-10-13_19-10-1728874217
2024-10-13_19-10-1728874237
2024-10-13_19-10-1728874252
2024-10-13_19-10-1728874269

Audiobookshelf version

2.15.0

How are you running audiobookshelf?

Docker

What OS is your Audiobookshelf server hosted from?

Linux

If the issue is being seen in the UI, what browsers are you seeing the problem on?

Chrome

Logs

No response

Additional Notes

Thorium (Chromium) 126.0.6478.231
Mercury (Firefox) 129.0.2
This has been going on for a long time, and I've seen the same behavior across all browsers and versions, extensions disabled or not.

Originally created by @kevinclevenger on GitHub (Oct 14, 2024). ### What happened? * Scroll down through the episodes of a podcast * The number of episodes diminishes until none are visible ### What did you expect to happen? * Be able to see the text of all the episoides ### Steps to reproduce the issue 1. Select a podcast from Library 2. Begin to scroll down through the episodes 3. Visible episodes become fewer and fewer until completely gone 4. At that point it's not possible to select an older episode (see attachments) ![2024-10-13_19-10-1728874217](https://github.com/user-attachments/assets/2a5e0b5b-d3f3-4e6e-8d3a-17a22b1876c1) ![2024-10-13_19-10-1728874237](https://github.com/user-attachments/assets/697b15c2-629f-4f3d-bbe0-d3ffbbfe6dd5) ![2024-10-13_19-10-1728874252](https://github.com/user-attachments/assets/994c77e7-9ef3-4f17-b030-1b170862d481) ![2024-10-13_19-10-1728874269](https://github.com/user-attachments/assets/003f6874-62ce-42a1-b2a8-e337b77b92f2) ### Audiobookshelf version 2.15.0 ### How are you running audiobookshelf? Docker ### What OS is your Audiobookshelf server hosted from? Linux ### If the issue is being seen in the UI, what browsers are you seeing the problem on? Chrome ### Logs _No response_ ### Additional Notes Thorium (Chromium) 126.0.6478.231 Mercury (Firefox) 129.0.2 This has been going on for a long time, and I've seen the same behavior across all browsers and versions, extensions disabled or not.
adam added the bug label 2026-04-25 00:05:58 +02:00
adam closed this issue 2026-04-25 00:05:58 +02:00
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@nichwall commented on GitHub (Oct 14, 2024):

Can you get any browser logs, such as looking for JavaScript warnings or errors, or the network tab? Both of these things are available using F12 in a browser.

Some other questions:

  • How many episodes are in the podcast?
  • Is it for all podcasts or only certain ones?
  • Does this happen immediately after navigating to the podcast, or after leaving the page open for a while? Sounds like this may be the same as https://github.com/advplyr/audiobookshelf/issues/3013

Would you be able to take a video of it happening? The screenshots are very helpful for what you're seeing, but would be good to have some help reproducing it.

@nichwall commented on GitHub (Oct 14, 2024): Can you get any browser logs, such as looking for JavaScript warnings or errors, or the network tab? Both of these things are available using F12 in a browser. Some other questions: - How many episodes are in the podcast? - Is it for all podcasts or only certain ones? - Does this happen immediately after navigating to the podcast, or after leaving the page open for a while? Sounds like this may be the same as https://github.com/advplyr/audiobookshelf/issues/3013 Would you be able to take a video of it happening? The screenshots are very helpful for what you're seeing, but would be good to have some help reproducing it.
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@kevinclevenger commented on GitHub (Oct 14, 2024):

  • The particular one in the example has 103
  • In testing any podcast with over 7-8 episodes has the issue
  • Immediately after opening the page or refreshing the page
  • The episodes start disappearing when about the 4th episode down becomes visible on scroll down
  • No activity in the toolbar spinner next to the Activities icon
  • In the inspector you can watch the contents of the div's above just disappear as you scroll down, i.e., anything inside the > <div id=episode... above is emptied and becomes <div id=episode... with no children
  • There's nothing at all in the container logs when this happens

I'll get a video this evening

console-export-2024-10-14_7-46-19.txt

2024-10-14_07-10-1728917957

@kevinclevenger commented on GitHub (Oct 14, 2024): * The particular one in the example has 103 * In testing any podcast with over 7-8 episodes has the issue * Immediately after opening the page or refreshing the page * The episodes start disappearing when about the 4th episode down becomes visible on scroll down * No activity in the toolbar spinner next to the Activities icon * In the inspector you can watch the contents of the div's above just disappear as you scroll down, i.e., anything inside the > <div id=episode... above is emptied and becomes <div id=episode... with no children * There's nothing at all in the container logs when this happens I'll get a video this evening [console-export-2024-10-14_7-46-19.txt](https://github.com/user-attachments/files/17365952/console-export-2024-10-14_7-46-19.txt) ![2024-10-14_07-10-1728917957](https://github.com/user-attachments/assets/521e6d1f-90e6-41ba-b388-9fa5376f0c2e)
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@kevinclevenger commented on GitHub (Oct 14, 2024):

I just noticed that there are always exactly 5 '> <div id=episode...' with children. When you scroll the divs above are cleaned/emptied (which makes no sense to me, why?), and the next below are populated.

If I set the page zoom way down I can see all 5 active/populated divs. So maybe this is more of a hidpi issue as the window for the 5 populated divs is outside the browser viewport (2K monitor, wayland/sway, scale 1.25)?

Simply not depopulating/repopulating the <div id=episode... would solve this I think.

@kevinclevenger commented on GitHub (Oct 14, 2024): I just noticed that there are always exactly 5 '> <div id=episode...' with children. When you scroll the divs above are cleaned/emptied (which makes no sense to me, why?), and the next below are populated. If I set the page zoom way down I can see all 5 active/populated divs. So maybe this is more of a hidpi issue as the window for the 5 populated divs is outside the browser viewport (2K monitor, wayland/sway, scale 1.25)? Simply not depopulating/repopulating the <div id=episode... would solve this I think.
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@advplyr commented on GitHub (Oct 26, 2024):

The reason that episodes are removed as you scroll is so the browser does not need to have listeners attached to a bunch of components that are out of view.

I'm not able to reproduce this issue. For some reason the scrollTop, window.innerHeight or offsetTop on the lazy-episodes-table div are not giving correct values.

Relevant function:
https://github.com/advplyr/audiobookshelf/blob/0782146682788c6b8ae883108b86690136c88c5d/client/components/tables/podcast/LazyEpisodesTable.vue#L488-L504

@advplyr commented on GitHub (Oct 26, 2024): The reason that episodes are removed as you scroll is so the browser does not need to have listeners attached to a bunch of components that are out of view. I'm not able to reproduce this issue. For some reason the `scrollTop`, `window.innerHeight` or `offsetTop` on the `lazy-episodes-table` div are not giving correct values. Relevant function: https://github.com/advplyr/audiobookshelf/blob/0782146682788c6b8ae883108b86690136c88c5d/client/components/tables/podcast/LazyEpisodesTable.vue#L488-L504
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@kevinclevenger commented on GitHub (Oct 26, 2024):

| I'm not able to reproduce this issue.

Linux, wayland, sway (all current)
screen 2560x1440, scale 1.25
Firefox (Mercury) 123.0.1, font size 20, min 16

Hope that helps, happy to get any info you need

@kevinclevenger commented on GitHub (Oct 26, 2024): | I'm not able to reproduce this issue. Linux, wayland, sway (all current) screen 2560x1440, scale 1.25 Firefox (Mercury) 123.0.1, font size 20, min 16 Hope that helps, happy to get any info you need
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@mikiher commented on GitHub (Jan 12, 2025):

@kevinclevenger, is this issue still happening for you? I've recently looked at the code around this area, but like @advplyr, I'm not able to reproduce this specific behavior myself on any browser I try. I admit I don't have access to Linux with Wayland and Sway.

@mikiher commented on GitHub (Jan 12, 2025): @kevinclevenger, is this issue still happening for you? I've recently looked at the code around this area, but like @advplyr, I'm not able to reproduce this specific behavior myself on any browser I try. I admit I don't have access to Linux with Wayland and Sway.
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@kevinclevenger commented on GitHub (Jan 12, 2025):

@mikiher It does still happen. I've tried at least four browsers, disabled extensions, etc and it happens 100% of the time on podcast episode listings with >10 or so episodes. I suspect that it's caused by the web app not playing well with some combination of hidpi, scale, and browser font size - if I reduce the browser zoom down to 80% the episodes will mostly by visible correctly.

| I admit I don't have access to Linux with Wayland and Sway.

I've confirmed that it has the same behavior on Gnome/Wayland/Firefox (2256x1504, scale 125%) so not a Sway issue.

@kevinclevenger commented on GitHub (Jan 12, 2025): @mikiher It does still happen. I've tried at least four browsers, disabled extensions, etc and it happens 100% of the time on podcast episode listings with >10 or so episodes. I suspect that it's caused by the web app not playing well with some combination of hidpi, scale, and browser font size - if I reduce the browser zoom down to 80% the episodes will mostly by visible correctly. | I admit I don't have access to Linux with Wayland and Sway. I've confirmed that it has the same behavior on Gnome/Wayland/Firefox (2256x1504, scale 125%) so not a Sway issue.
adam commented 2026-04-25 00:05:59 +02:00
Author
Owner
Copy Link
Copy Source

@mikiher commented on GitHub (Jan 12, 2025):

I may ask you to help me with debugging this on your setup, if you're willing.

I have a suspicion that this has to do with the fixed episode row size that is used for calculating which episodes are visible - I think there is a mismatch between this size and the row's actual size, which causes the code to mount episodes that are outside the visible area - stay tuned.

@mikiher commented on GitHub (Jan 12, 2025): I may ask you to help me with debugging this on your setup, if you're willing. I have a suspicion that this has to do with the fixed episode row size that is used for calculating which episodes are visible - I think there is a mismatch between this size and the row's actual size, which causes the code to mount episodes that are outside the visible area - stay tuned.
adam commented 2026-04-25 00:06:00 +02:00
Author
Owner
Copy Link
Copy Source

@mikiher commented on GitHub (Jan 12, 2025):

Yay! I'm now able to reproduce this on my machine as well, by manually changing the root element font-size.

https://github.com/user-attachments/assets/679955a4-b9b0-4b39-8420-d908fbcfaff4

So, as I suspected, this is because the non-default root font-size (which, in your case, is probably set via some browser or system setting) causes the episode row height to be larger (or smaller), and is not identical to the hardcoded 176 which is used for scroll calculations.

I will add some code to determine the row size dynamically (like setCardSize in bookShelfCardsHelpers.js), and this will resolve this issue

@mikiher commented on GitHub (Jan 12, 2025): Yay! I'm now able to reproduce this on my machine as well, by manually changing the root element font-size. https://github.com/user-attachments/assets/679955a4-b9b0-4b39-8420-d908fbcfaff4 So, as I suspected, this is because the non-default root font-size (which, in your case, is probably set via some browser or system setting) causes the episode row height to be larger (or smaller), and is not identical to the hardcoded 176 which is used for scroll calculations. I will add some code to determine the row size dynamically (like `setCardSize` in `bookShelfCardsHelpers.js`), and this will resolve this issue
adam commented 2026-04-25 00:06:00 +02:00
Author
Owner
Copy Link
Copy Source

@advplyr commented on GitHub (Jan 12, 2025):

Ah yeah I've never changed that before. In Brave that is adjustable here
image

Setting that to very large causes some issues.
image

Github doesn't respond at all to that setting. Youtube doesn't appear to either.

@advplyr commented on GitHub (Jan 12, 2025): Ah yeah I've never changed that before. In Brave that is adjustable here ![image](https://github.com/user-attachments/assets/b6ce6357-cf1a-4551-9eeb-34d0a09f57e7) Setting that to very large causes some issues. ![image](https://github.com/user-attachments/assets/4e4ad61c-5896-4235-93cc-a01e584a2d33) Github doesn't respond at all to that setting. Youtube doesn't appear to either.
adam commented 2026-04-25 00:06:00 +02:00
Author
Owner
Copy Link
Copy Source

@advplyr commented on GitHub (Jan 12, 2025):

In certain places like the siderails we should be using em or px instead of rem for font sizes. Those fixes can be handled separately though from the episode list.

@advplyr commented on GitHub (Jan 12, 2025): In certain places like the siderails we should be using `em` or `px` instead of `rem` for font sizes. Those fixes can be handled separately though from the episode list.
adam commented 2026-04-25 00:06:00 +02:00
Author
Owner
Copy Link
Copy Source

@mikiher commented on GitHub (Jan 14, 2025):

It's also adjustable in Chrome. I think we need to make sure all pages in the web client react well to these changes (I think especially the lazy-load pages, in which various calculations are made based on heights and widths of lazy-loading components)

@mikiher commented on GitHub (Jan 14, 2025): It's also adjustable in Chrome. I think we need to make sure all pages in the web client react well to these changes (I think especially the lazy-load pages, in which various calculations are made based on heights and widths of lazy-loading components)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#2310
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?