YTMD/youtube-music

Fork 0

fix(style): fix duplicated scrollbar #3483

Merged

h-banii merged 1 commit from fix/duplicated-scrollbar into master

2025-06-30 03:38:59 +00:00

h-banii commented

2025-06-13 23:19:03 +00:00

(Migrated from github.com)

Closes #3039

This PR just hides the body's overflow (catch-all solution to never show the double scrollbars)

before	after

The bug only seems to happen when:

in-app menu is enabled
"notification-action" popup is triggered (save to playlist, add to liked songs, etc)

I think it has something to do with the top margin added by the in-app menu
(plus the 1px added by the notification container)

Alternative solution. This targets the notification container specifically.

ytmusic-notification-action-renderer {
  position: fixed;
  z-index: 103; /* magic number from `tp-yt-paper-toast`, but anything >4 is fine */
  /* z-index is needed because otherwise it gets hidden under the left drawer menu */
}

Or even

ytmusic-notification-action-renderer {
  position: absolute;
}
yt-notification-action-renderer {
  width: 0 !important; /* the width is set to 1px, and it somehow causes vertical scroll to appear */
  /* height is also set to 1px, but just the width is enough */
}

Note

Interestingly, the double scrollbars don't go away when you close the notification popup...

Youtube just creates a node for each notification in the DOM tree, then hides it with css and never removes it.

It's a bit concerning in terms of memory, but that's a separate issue lol.

Closes #3039 This PR just hides the body's overflow (catch-all solution to never show the double scrollbars) |before|after| |-|-| |![ytm-before](https://github.com/user-attachments/assets/b7ca4fea-2875-4fee-996e-5301c0ba5f83)|![ytm-after](https://github.com/user-attachments/assets/9258e1a5-a62d-4d95-9ff5-1d7939e93375)| <hr> The bug only seems to happen when: - **in-app menu** is enabled - "notification-action" popup is triggered (`save to playlist`, `add to liked songs`, etc) I think it has something to do with the top margin added by the **in-app menu** (plus the 1px added by the notification container) <hr> Alternative solution. This targets the notification container specifically. ```css ytmusic-notification-action-renderer { position: fixed; z-index: 103; /* magic number from `tp-yt-paper-toast`, but anything >4 is fine */ /* z-index is needed because otherwise it gets hidden under the left drawer menu */ } ``` Or even ```css ytmusic-notification-action-renderer { position: absolute; } yt-notification-action-renderer { width: 0 !important; /* the width is set to 1px, and it somehow causes vertical scroll to appear */ /* height is also set to 1px, but just the width is enough */ } ``` <hr> > [!NOTE] > Interestingly, the double scrollbars don't go away when you close the notification popup... > > Youtube just creates a node for each notification in the DOM tree, then hides it with css and never removes it. > > It's a bit concerning in terms of memory, but that's a separate issue lol.

arjix commented

2025-06-14 22:13:33 +00:00

Owner

Youtube just creates a node for each notification in the DOM tree, then hides it with css and never removes it.

It's a bit concerning in terms of memory, but that's a separate issue lol.

Holy shit, we should probably replace their notification system entirely.

> Youtube just creates a node for each notification in the DOM tree, then hides it with css and never removes it. <br> > It's a bit concerning in terms of memory, but that's a separate issue lol. Holy shit, we should probably replace their notification system entirely.

arjix reviewed

2025-06-14 22:16:06 +00:00

src/youtube-music.css

arjix commented

2025-06-14 22:16:06 +00:00

Owner

I'd prefer overflow-y since this is for the Y axis, but if someone gets a horizontal scrollbar then ngl that's their problem 🤣

I'd prefer `overflow-y` since this is for the Y axis, but if someone gets a horizontal scrollbar then ngl that's their problem :rofl:

JellyBrick (Migrated from github.com) reviewed

2025-06-29 13:10:49 +00:00

src/youtube-music.css

JellyBrick (Migrated from github.com) commented

2025-06-29 13:10:45 +00:00

I'm worried that this patch might introduce unintended side effects.

h-banii (Migrated from github.com) reviewed

2025-06-29 19:51:44 +00:00

src/youtube-music.css

h-banii (Migrated from github.com) commented

2025-06-29 19:51:44 +00:00

yeah, fair

youtube seems to be setting body.style = "overflow: hidden/visible;" through javascript to dinamically (un)hide the scrollbars when the user goes from the player to home and vice-versa.

Also, I just noticed this could conflict with the unobtrusive player plugin too:
40429034b6/src/plugins/unobtrusive-player/style.css (L1-L3)

yeah, fair youtube seems to be setting `body.style = "overflow: hidden/visible;"` through javascript to dinamically (un)hide the scrollbars when the user goes from the player to home and vice-versa. Also, I just noticed this could conflict with the `unobtrusive player` plugin too: https://github.com/th-ch/youtube-music/blob/40429034b6c5f3a2f0a3f480cf3b7a6be5ef86ce/src/plugins/unobtrusive-player/style.css#L1-L3

h-banii commented

2025-06-29 20:02:28 +00:00

(Migrated from github.com)

Since the problem is mainly caused by in-app-menu's margin-top, I decided to just fix it by using padding-top instead.

This seems to fix the issue.

Since the problem is mainly caused by **in-app-menu's** `margin-top`, I decided to just fix it by using `padding-top` instead. This seems to fix the issue.

❤️ 2

JellyBrick (Migrated from github.com) approved these changes

2025-06-30 03:38:22 +00:00