CSS Custom Scrollbars Not Appearing in Firefox 107 with Overflow Hidden
I'm not sure how to approach I'm optimizing some code but I'm trying to debug I've been banging my head against this for hours. I've looked through the documentation and I'm still confused about I'm currently working on a web application that requires custom-styled scrollbars. I've implemented the styles using the `::-webkit-scrollbar` pseudo-element for WebKit browsers, and it works perfectly in Chrome and Edge. However, when I test it in Firefox 107, the custom scrollbars do not show up at all, and the default scrollbars are visible instead. Here's the relevant CSS I have: ```css .container { width: 300px; height: 400px; overflow: hidden; } .container::-webkit-scrollbar { width: 12px; } .container::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; } .container::-webkit-scrollbar-thumb:hover { background: #555; } ``` I’ve also tried using `overflow: auto` instead of `overflow: hidden`, but that made no difference in Firefox. The scenario continues even when switching to `overflow-y: scroll`. The scrollbars are visible in Edge but not in Firefox. I even checked the developer tools in Firefox, and there's no sign of the `::-webkit-scrollbar` styles being recognized. Is there something specific I need to do for Firefox to render custom scrollbars, or is there a compatibility scenario with using `overflow: hidden`? Any help would be greatly appreciated! This is part of a larger CLI tool I'm building. I'd really appreciate any guidance on this. For context: I'm using Css on Linux. What am I doing wrong? I've been using Css for about a year now. What am I doing wrong? I appreciate any insights! I'm using Css 3.9 in this project. Is there a better approach? The stack includes Css and several other technologies.