Question 1

Why isn't my custom CSS scrollbar showing up in Mozilla Firefox?

Accepted Answer

Firefox utilizes a completely different rendering engine (Gecko) than Google Chrome and Apple Safari (Blink/WebKit). Firefox strictly adheres to W3C standards and explicitly ignores all -webkit- prefixed pseudo-elements like ::-webkit-scrollbar. To style scrollbars in Firefox, you must use the standard properties scrollbar-width and scrollbar-color applied directly to the scrollable container or the html element.

Question 2

Can I animate the scrollbar thumb color when a user hovers over it?

Accepted Answer

No, you cannot natively animate CSS scrollbar properties. Because the scrollbar pseudo-elements exist within the browser's Shadow DOM and are rendered differently than standard HTML elements, properties like transition: background-color 0.3s ease; will be completely ignored by the browser. The color will change instantly upon hover without any smooth transition.

Question 3

How do I make the scrollbar track transparent so it looks like macOS?

Accepted Answer

To achieve a floating overlay look on Windows, you can set the track background to transparent using ::-webkit-scrollbar-track { background: transparent; }. However, you must also ensure that the scrollable container does not have an overflow setting that forces a solid background behind the track. Be aware that the scrollbar will still physically take up space (e.g., 12px) unless you specifically use the highly experimental overflow: overlay property.

Question 4

Does styling the scrollbar affect my website's mobile performance?

Accepted Answer

Native CSS scrollbar styling has absolutely zero impact on mobile performance because mobile operating systems like iOS and Android inherently ignore desktop scrollbar CSS rules. Mobile browsers utilize native, hardware-accelerated overlay scrollbars designed specifically for touch interactions. Your CSS code will simply be bypassed, ensuring no performance degradation.

Question 5

What is the correct contrast ratio for a scrollbar thumb?

Accepted Answer

According to the Web Content Accessibility Guidelines (WCAG) 2.1, scrollbars are considered User Interface Components. Therefore, the color of the scrollbar thumb must maintain a minimum contrast ratio of 3:1 against the color of the scrollbar track. Failing to meet this minimum contrast ratio makes it exceedingly difficult for visually impaired users to locate and utilize the scrollbar.

Question 6

Can I change the width of the scrollbar in Firefox to exactly 12 pixels?

Accepted Answer

No, you cannot specify exact pixel widths for scrollbars in Firefox. The W3C standardized scrollbar-width property only accepts three specific keyword values: auto (the default OS width), thin (a slimmer version determined by the browser), and none (completely hidden). You cannot write scrollbar-width: 12px; as the browser will simply invalidate and ignore the rule.

CSS Scrollbar Generator

Command Palette