YTMD/youtube-music
1
0
Fork 0
Code Issues 445 Pull requests 34 Projects Releases 87 Packages Wiki Activity Actions

[Bug]: duplicated scrollbar #3039

New issue
Closed
opened 2025-02-28 16:12:29 +00:00 by ValiantZippu · 16 comments
ValiantZippu commented 2025-02-28 16:12:29 +00:00 (Migrated from github.com)
Copy link

Preflight Checklist

  • I use the latest version of YouTube Music (Application).
  • I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

So basically we have a scroll bar right ?
and it works right ?
but does it looks visually appealing ? No right ?
That's what I am saying

Image
Image
Image
Image

Proposed Solution

I have a suggestion that I hope you will consider. The current scrollbar is not visually appealing, and I find it unnecessary. I believe that the same functionality can be achieved with a more modern, smaller scrollbar.

this is the current one
Image

and this is the simple modern sample [ we all know ]
Image

Alternatives Considered

.

Additional Information

No response

### Preflight Checklist - [x] I use the latest version of YouTube Music (Application). - [x] I have searched the [issue tracker](https://github.com/th-ch/youtube-music/issues) for a feature request that matches the one I want to file, without success. ### Problem Description So basically we have a scroll bar right ? and it works right ? but does it looks visually appealing ? No right ? That's what I am saying ![Image](https://github.com/user-attachments/assets/c5dccfa1-9d8c-4f32-b60c-b0214b39d0a8) ![Image](https://github.com/user-attachments/assets/6ed7a21e-e40a-42cb-982b-cc722d26eb7e) ![Image](https://github.com/user-attachments/assets/edbb054b-017f-4c48-8770-127ba1f9e39c) ![Image](https://github.com/user-attachments/assets/84750451-75e7-42d4-9c3b-7c9b2ccf0112) ### Proposed Solution I have a suggestion that I hope you will consider. The current scrollbar is not visually appealing, and I find it unnecessary. I believe that the same functionality can be achieved with a more modern, smaller scrollbar. this is the current one ![Image](https://github.com/user-attachments/assets/2781e4fb-8e23-41d9-b7aa-5c78fe7749c6) and this is the simple modern sample [ we all know ] ![Image](https://github.com/user-attachments/assets/e8ec973c-5651-4fa2-a3d2-4484d5c7c7ce) ### Alternatives Considered . ### Additional Information _No response_
👍 5 🚀 1
pedrovanderbeek commented 2025-03-02 19:26:59 +00:00 (Migrated from github.com)
Copy link

I second this, but I raise a bigger issue with it.
The 'double scrollbar' issue (shown in the first 3 examples you provided).
It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.

I second this, but I raise a bigger issue with it. The 'double scrollbar' issue (shown in the first 3 examples you provided). It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.
🚀 1
h-banii commented 2025-03-02 23:00:14 +00:00 (Migrated from github.com)
Copy link

you can use a custom css theme to customize the scrollbar

Example:

* {
  scrollbar-width: unset !important;
  scrollbar-color: unset !important;
}

*::-webkit-scrollbar {
    width: 8px !important;
    height: 0px !important;
}

*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

Image

The double scrollbar doesn't seem to happen on Linux, so idk

you can use a custom css theme to customize the scrollbar Example: ```css * { scrollbar-width: unset !important; scrollbar-color: unset !important; } *::-webkit-scrollbar { width: 8px !important; height: 0px !important; } *::-webkit-scrollbar-thumb { border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ``` ![Image](https://github.com/user-attachments/assets/f3937a94-8855-47f1-88c7-b075047a933a) <hr> The double scrollbar doesn't seem to happen on Linux, so idk
👍 3
ValiantZippu commented 2025-03-03 10:00:51 +00:00 (Migrated from github.com)
Copy link

I second this, but I raise a bigger issue with it.
The 'double scrollbar' issue (shown in the first 3 examples you provided).
It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.

Yeah for real literally that's what I am showing 2 big chunk of white scrollbar I hope it gets fixed and gets a modern rounded small scrollbar we all know and also has been shown in my design example.

> I second this, but I raise a bigger issue with it. > The 'double scrollbar' issue (shown in the first 3 examples you provided). > It is a huge flaw that needs to be addressed IMO, and should be a quick-fix. Yeah for real literally that's what I am showing 2 big chunk of white scrollbar I hope it gets fixed and gets a modern rounded small scrollbar we all know and also has been shown in my design example.
ValiantZippu commented 2025-03-03 10:03:35 +00:00 (Migrated from github.com)
Copy link

you can use a custom css theme to customize the scrollbar

Example:

* {
  scrollbar-width: unset !important;
  scrollbar-color: unset !important;
}

*::-webkit-scrollbar {
    width: 8px !important;
    height: 0px !important;
}

*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

Image

The double scrollbar doesn't seem to happen on Linux, so idk

I don't know about Linux but most of the people use and it is a problem here so .

> you can use a custom css theme to customize the scrollbar > > Example: > ```css > * { > scrollbar-width: unset !important; > scrollbar-color: unset !important; > } > > *::-webkit-scrollbar { > width: 8px !important; > height: 0px !important; > } > > *::-webkit-scrollbar-thumb { > border-radius: 4px; > border: 2px solid transparent; > background-clip: padding-box; > } > ``` > > ![Image](https://github.com/user-attachments/assets/f3937a94-8855-47f1-88c7-b075047a933a) > > <hr> > > The double scrollbar doesn't seem to happen on Linux, so idk I don't know about Linux but most of the people use and it is a problem here so .
JellyBrick commented 2025-03-03 13:30:42 +00:00 (Migrated from github.com)
Copy link

It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.

Not easy to fix. this is a UI/UX flaw on YouTube.
I think this issue is caused by Google's A/B testing, I can't reproduce it on my account.

> It is a huge flaw that needs to be addressed IMO, and should be a quick-fix. Not easy to fix. this is a UI/UX flaw on YouTube. I think this issue is caused by Google's A/B testing, I can't reproduce it on my account.
JellyBrick commented 2025-03-03 13:32:06 +00:00 (Migrated from github.com)
Copy link

Also, this is a “bug”, not a “feature request”.

Also, this is a “bug”, not a “feature request”.
pedrovanderbeek commented 2025-03-03 16:41:07 +00:00 (Migrated from github.com)
Copy link

It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.

Not easy to fix. this is a UI/UX flaw on YouTube.
I think this issue is caused by Google's A/B testing, I can't reproduce it on my account.

Appreciate your input. It seems it only shows the double scrollbar sometimes, I reset the app and it worked.

> > It is a huge flaw that needs to be addressed IMO, and should be a quick-fix. > > Not easy to fix. this is a UI/UX flaw on YouTube. > I think this issue is caused by Google's A/B testing, I can't reproduce it on my account. Appreciate your input. It seems it only shows the double scrollbar sometimes, I reset the app and it worked.
ValiantZippu commented 2025-03-03 20:01:45 +00:00 (Migrated from github.com)
Copy link

It is a huge flaw that needs to be addressed IMO, and should be a quick-fix.

Not easy to fix. this is a UI/UX flaw on YouTube.
I think this issue is caused by Google's A/B testing, I can't reproduce it on my account.

Appreciate your input. It seems it only shows the double scrollbar sometimes, I reset the app and it worked.

For me it shows me ever since from 3.5.3 to 3.7.5 version.It would be a great touch if can be fixed.

> > > It is a huge flaw that needs to be addressed IMO, and should be a quick-fix. > > > > Not easy to fix. this is a UI/UX flaw on YouTube. > > I think this issue is caused by Google's A/B testing, I can't reproduce it on my account. > > Appreciate your input. It seems it only shows the double scrollbar sometimes, I reset the app and it worked. For me it shows me ever since from 3.5.3 to 3.7.5 version.It would be a great touch if can be fixed.
😕 1
pedrovanderbeek commented 2025-03-04 01:09:22 +00:00 (Migrated from github.com)
Copy link

@ValiantZippu and anyone else with this issue...

I should mention something else, it might help fix it, as I think it might have fixed mine, I just forgot that extra step.

  1. Import the custom CSS provided by @h-banii through the menu option in the app.
  2. Restart App through Navigation options in menu (NOT Reload or Force Reload)
  3. Remove the custom CSS snippet.
  4. Restart App through Navigation options in menu (NOT Reload or Force Reload)

I think this might have fixed that issue, for some reason...
Let me know if it works.

CSS snippet:

* {
  scrollbar-width: unset !important;
  scrollbar-color: unset !important;
}

*::-webkit-scrollbar {
    width: 8px !important;
    height: 0px !important;
}

*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
@ValiantZippu and anyone else with this issue... I should mention something else, it might help fix it, as I think it might have fixed mine, I just forgot that extra step. 1. Import the custom CSS provided by @h-banii through the menu option in the app. 2. Restart App through Navigation options in menu (**NOT** Reload or Force Reload) 3. Remove the custom CSS snippet. 4. Restart App through Navigation options in menu (**NOT** Reload or Force Reload) I think this might have fixed that issue, for some reason... Let me know if it works. CSS snippet: ``` * { scrollbar-width: unset !important; scrollbar-color: unset !important; } *::-webkit-scrollbar { width: 8px !important; height: 0px !important; } *::-webkit-scrollbar-thumb { border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ```
Damglador commented 2025-03-12 14:39:48 +00:00 (Migrated from github.com)
Copy link

The double scrollbar doesn't seem to happen on Linux, so idk

I have it on Arch Linux

> The double scrollbar doesn't seem to happen on Linux, so idk I have it on Arch Linux
h-banii commented 2025-03-13 03:30:52 +00:00 (Migrated from github.com)
Copy link

The double scrollbar doesn't seem to happen on Linux, so idk

I have it on Arch Linux

I couldn't reproduce the bug on NixOS so I assumed it didn't happen on Linux, but as Jellybrick pointed out earlier it could be A/B testing:

Not easy to fix. this is a UI/UX flaw on YouTube. I think this issue is caused by Google's A/B testing, I can't reproduce it on my account.

It's still kinda weird though, I wonder if this happens on the web too (chromium/firefox/webkit) or just here.
(also, the post went from feature request to bug, so it's missing some information to properly reproduce/debug it)

> > The double scrollbar doesn't seem to happen on Linux, so idk > > I have it on Arch Linux I couldn't reproduce the bug on NixOS so I assumed it didn't happen on Linux, but as Jellybrick pointed out earlier it could be A/B testing: > Not easy to fix. this is a UI/UX flaw on YouTube. I think this issue is caused by Google's A/B testing, I can't reproduce it on my account. It's still kinda weird though, I wonder if this happens on the web too (chromium/firefox/webkit) or just here. (also, the post went from feature request to bug, so it's missing some information to properly reproduce/debug it)
Damglador commented 2025-03-13 13:16:06 +00:00 (Migrated from github.com)
Copy link

I don't think it was always there for me either. In any case, the custom CSS fixed it for me, at least for now.

I don't think it was always there for me either. In any case, the custom CSS fixed it for me, at least for now.
ValiantZippu commented 2025-03-14 07:52:55 +00:00 (Migrated from github.com)
Copy link

The CSS config works [ Mostly ]

For me the double scrollbar now appears randomly in artist page and anywhere the navigation bar is present
Like the double scrollbar works like if you scroll it on top it would remove the navigation bar dark / blur background and if you scroll it down it would scroll the page a little bit and remove the dark/blur navigation bar. But the CSS theme cannot produce the smooth hovering transition it is just slab of modern scrollbar which works for now but need work.

The CSS config works [ Mostly ] For me the double scrollbar now appears randomly in artist page and anywhere the navigation bar is present Like the double scrollbar works like if you scroll it on top it would remove the navigation bar dark / blur background and if you scroll it down it would scroll the page a little bit and remove the dark/blur navigation bar. But the CSS theme cannot produce the smooth hovering transition it is just slab of modern scrollbar which works for now but need work.
😕 1
Rairof commented 2025-06-05 13:35:43 +00:00 (Migrated from github.com)
Copy link

On an unrelated note, it could be better if we could have a modern, sleek, rounded scrollbar implementation while fixing this issue. Just a suggestion.

On an unrelated note, it could be better if we could have a modern, sleek, rounded scrollbar implementation while fixing this issue. Just a suggestion.
rhynzler commented 2025-06-11 14:01:54 +00:00 (Migrated from github.com)
Copy link

I was able to reproduce the bug by adding a song to a playlist. The cause of the error is the bottom notification that confirms the song was added to the list.

https://github.com/user-attachments/assets/b37ec169-71db-4812-b5b3-d1c77eec9dcc

I was able to reproduce the bug by adding a song to a playlist. The cause of the error is the bottom notification that confirms the song was added to the list. https://github.com/user-attachments/assets/b37ec169-71db-4812-b5b3-d1c77eec9dcc
👍 2
h-banii commented 2025-06-13 23:22:57 +00:00 (Migrated from github.com)
Copy link

Thanks, I was able to reproduce it.

I think the bug only happens when the in-app menu is enabled.

For now, this should fix it

body {
  overflow: hidden !important;
}
Thanks, I was able to reproduce it. I think the bug only happens when the **in-app menu** is enabled. For now, this should fix it ```css body { overflow: hidden !important; } ```
👍 1
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
renovate/electron-38.x
renovate/zod-4.x
renovate/hono-node-server-1.x
renovate/vite-7.x
renovate/discord-api-types-0.x
snyk-fix-cc0d8c0a11cb136c85b52eac08f01ecd
renovate/youtubei.js-15.x
renovate/virtua-0.x
renovate/npm-hono-vulnerability
dependabot/npm_and_yarn/hono-4.9.7
renovate/ffmpeg.wasm-main-0.x
renovate/ffmpeg.wasm-core-mt-0.x
snyk-fix-b03d669b0e10f74efab60edd2a874685
refactor/music-together
feat/webnowplaying-v1
feat/chromecast
legacy/http-api
v3.11.0
v3.10.0
v3.9.0
v3.8.1
v3.8.0
v3.7.5
v3.7.4
v3.7.3
v3.7.2
v3.7.1
v3.7.0
v3.6.2
v3.6.1
v3.6.0
v3.5.3
v3.5.2
v3.5.1
v3.5.0
v3.4.1
v3.4.0
v3.3.12
v3.3.11
v3.3.10
v3.3.9
v3.3.8
v3.3.7
v3.3.6
v3.3.5
v3.3.4
v3.3.3
v3.3.2
v3.3.1
v3.3.0
v3.2.2
v3.2.1
v3.2.0
v3.1.1
v3.1.0
v3.0.2
v3.0.1
v3.0.0
v2.2.0
v2.1.3
v2.1.2
v2.1.1
v2.1.0
v2.0.4
v2.0.3
v2.0.2
v2.0.1
v2.0.0
v1.20.0
v1.19.0
v1.18.0
v1.17.0
v1.16.0
v1.15.0
v1.14.0
v1.13.0
v1.12.2
v1.12.1
v1.12.0
v1.11.0
v1.10.0
v1.9.0
v1.8.2
v1.8.1
v1.8.0
v1.7.5
v1.7.3
v1.7.4
v1.7.2
v1.7.1
v1.7.0
v1.6.5
v1.6.4
v1.6.3
v1.6.2
v1.6.0
v1.5.0
v1.4.0
v1.3.3
v1.3.2
v1.3.1
v1.2.0
v1.1.6
v1.1.5
v1.1.4
v1.1.3
v1.1.2
v1.1.1
v1.0.0
v1.1.0
Labels
Clear labels   
awaiting-reply

Awaiting reply

  
breaking changes

   
bug

Something isn't working

  
cannot-reproduce

Bug cannot be reproduced

  
dependencies

Pull requests that update a dependency file

  
documentation

   
duplicate

This issue or pull request already exists

  
electron-issue

It's an Electron or Electron related dependencies issue (not YTM-Desktop issue)

  
enhancement

New feature or request

  
fix-available

A fix to the issue is available in a new version

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
javascript

Pull requests that update javascript code

  
need more information

Need more information about the issue

  
need rebase

This plugin need rebase

  
official-youtube-music-issue

It's an YouTube's issue (not YTM-Desktop issue)

  
plugin request

An issue/discussion requesting for a new plugin or new functionality to an existing plugin.

  
question

Further information is requested

  
release

Release

  
security

   
stale

   
Status: blocked

There are something to do before this

  
typo

   
wontfix

This will not be worked on

  
ytmd-issue

An issue/discussion about ytm desktop, unrelated to th-ch/youtube-music

No labels
awaiting-reply
breaking changes
bug
cannot-reproduce
dependencies
documentation
duplicate
electron-issue
enhancement
fix-available
good first issue
help wanted
invalid
javascript
need more information
need rebase
official-youtube-music-issue
plugin request
question
release
security
stale
Status: blocked
typo
wontfix
ytmd-issue
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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: YTMD/youtube-music#3039
No description provided.
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?