fix(player): scrollbar styles not applying on chromium 121+

mihar-22 · mihar-22 · commit 6404bfe75b03 · 2024-02-02T14:09:23.000+11:00
diff --git a/packages/vidstack/player/styles/default/menus.css b/packages/vidstack/player/styles/default/menus.css
@@ -59,9 +59,11 @@
 }
 
 :where(.vds-menu-items) {
+  --vds-scrollbar-thumb: var(--media-menu-scrollbar-thumb-bg, rgb(245 245 245 / 0.1));
   box-sizing: border-box;
   min-width: var(--media-menu-min-width, 280px);
   scrollbar-width: thin;
+  scrollbar-color: var(--vds-scrollbar-thumb) var(--media-menu-scrollbar-track-bg, transparent);
 }
 
 :where(.vds-menu-items)::-webkit-scrollbar {
@@ -77,12 +79,12 @@
 }
 
 :where(.vds-menu-items)::-webkit-scrollbar-thumb {
-  background-color: var(--media-menu-scrollbar-thumb-bg, rgb(245 245 245 / 0.1));
+  background-color: var(--vds-scrollbar-thumb);
   border-radius: 4px;
 }
 
 :where(.vds-menu-items)::-webkit-scrollbar-corner {
-  background-color: var(--media-menu-scrollbar-thumb-bg, rgb(245 245 245 / 0.1));
+  background-color: var(--vds-scrollbar-thumb);
 }
 
 /*
@@ -162,7 +164,7 @@
   backdrop-filter: blur(4px);
   height: var(--menu-height, auto);
   will-change: width, height;
-  overflow-y: scroll;
+  overflow-y: auto;
   overscroll-behavior: contain;
   opacity: 0;
   z-index: 9999999;
@@ -181,6 +183,7 @@
 :where(.vds-menu-items[data-resizing]) {
   --media-menu-scrollbar-thumb-bg: rgba(0, 0, 0, 0);
   pointer-events: none;
+  overflow: hidden;
 }
 
 /*
diff --git a/packages/vidstack/src/components/ui/menu/menu.ts b/packages/vidstack/src/components/ui/menu/menu.ts
@@ -473,9 +473,12 @@ export class Menu extends Component<MenuProps, {}, MenuEvents> {
       }
     }
 
-    requestAnimationFrame(() => {
-      setStyle(content, '--menu-height', height + 'px');
-    });
+    if (parseFloat(styles.height) !== height) {
+      setAttribute(content, 'data-resizing', '');
+      requestAnimationFrame(() => {
+        setStyle(content, '--menu-height', height + 'px');
+      });
+    }
   });
 
   protected _onResizeTransition(event: TransitionEvent) {

Original file line number	Diff line number	Diff line change
`@@ -473,9 +473,12 @@ export class Menu extends Component<MenuProps, {}, MenuEvents> {`
`473`	`473`	`}`
`474`	`474`	`}`
`475`	`475`
`476`		`- requestAnimationFrame(() => {`
`477`		`- setStyle(content, '--menu-height', height + 'px');`
`478`		`- });`
	`476`	`+ if (parseFloat(styles.height) !== height) {`
	`477`	`+ setAttribute(content, 'data-resizing', '');`
	`478`	`+ requestAnimationFrame(() => {`
	`479`	`+ setStyle(content, '--menu-height', height + 'px');`
	`480`	`+ });`
	`481`	`+ }`
`479`	`482`	`});`
`480`	`483`
`481`	`484`	`protected _onResizeTransition(event: TransitionEvent) {`