[GH-ISSUE #1640] [BUG] Web App: Screen header collapse / expand animation can be buggy on certain list length to display height ratios #894

Open
opened 2026-02-26 02:34:33 +03:00 by kerem · 4 comments
Owner

Originally created by @HannesJo0139 on GitHub (Dec 26, 2022).
Original GitHub issue: https://github.com/koel/koel/issues/1640

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
Originally created by @HannesJo0139 on GitHub (Dec 26, 2022). Original GitHub issue: https://github.com/koel/koel/issues/1640 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
Author
Owner

@phanan commented on GitHub (Feb 25, 2023):

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

<!-- gh-comment-id:1445148815 --> @phanan commented on GitHub (Feb 25, 2023): I'm aware of the issue but would consider it as WNF. Fixes are most welcome, though!
Author
Owner

@HannesJo0139 commented on GitHub (Feb 27, 2023):

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.

<!-- gh-comment-id:1446157038 --> @HannesJo0139 commented on GitHub (Feb 27, 2023): 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.
Author
Owner

@phanan commented on GitHub (Feb 27, 2023):

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.

<!-- gh-comment-id:1446224107 --> @phanan commented on GitHub (Feb 27, 2023): 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.
Author
Owner

@phanan commented on GitHub (Feb 27, 2023):

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

<!-- gh-comment-id:1446224742 --> @phanan commented on GitHub (Feb 27, 2023): I'll reopen it though, just in case someone wants to submit a PR :)
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/koel-koel#894
No description provided.