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

[kevinclevenger]

trafficstars

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)

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.

[nichwall]

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.

[kevinclevenger]

• 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

[kevinclevenger]

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.

[advplyr]

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

[kevinclevenger]

| 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

[mikiher]

@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.

[kevinclevenger]

@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.

[mikiher]

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]

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

[advplyr]

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

Setting that to very large causes some issues.

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

[advplyr]

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.

[mikiher]

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)