[BUG] Web App: Screen header collapse / expand animation can be buggy on certain list length to display height ratios

[HannesJo0139]

I like tha collapsing header and disappearing cover when scrolling down a list. However, sometimes when it is just being animated, the changing height seems to change the threshold in a way that the animation is suddenly reset but then due to the reset height immediately starts again. Ending up in a bouncing and jiggling collapsing and expanding header (and cover) during scroll. There should be some kind of animation blocking as long as the animation is already running. Maybe also a delay or so.

To reproduce
Steps to reproduce the behavior:

1. Go to eg Album view with a scrollbar
2. Set display height so that scrollbar nearly disappears but header collapse can still be triggered
3. Scroll
4. See error

Environment

• Koel version 6.10 (official docker image)
• OS: macOS Ventura
• Browser Chrome 108

[phanan]

I'm aware of the issue but would consider it as WNF. Fixes are most welcome, though!

[HannesJo0139]

Not a software dev but maybe telling you what engineers do in such situations could be a hint? Easiest would be a blocking time as I described. It would be called debouncing. In hardware every button needs that. If this is not suitable for any reason we would create a hysteresis behavior where you have different trigger values for expand vs collapse. It may also be necessary to define a min height compared to screen height. If this condition is not satisfied the animation would have to be blocked completely.

[phanan]

Thanks! It's not much about how to fix, but whether it's worth it, knowing that it's a bug that 1. only occurs under very specific conditions and 2. is relatively easy to work around.

[phanan]

I'll reopen it though, just in case someone wants to submit a PR :)