[Bug]: duplicated scrollbar

[ValiantZippu]

Preflight Checklist

• [x] I use the latest version of YouTube Music (Application).
• [x] 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

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

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

Alternatives Considered

.

Additional Information

No response

[pedrovanderbeek]

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.

[h-banii]

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;
}

---

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

[ValiantZippu]

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]

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;
}

---

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]

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]

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

[pedrovanderbeek]

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]

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.

[pedrovanderbeek]

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

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

I have it on Arch Linux

[h-banii]

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]

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]

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.

[Rairof]

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]

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

[h-banii]

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;
}