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

vidstack · Feb 2, 2024 · 6404bfe · 6404bfe
1 parent 4217dfe
commit 6404bfe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
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) {