Mac Scrolling Bar Issue in Frontend Design
Issue
While working on a frontend project, I encountered an issue where the scroll bar on Mac appeared abnormal. Instead of the default style, it would randomly display an incorrect version, which was frustrating.
Beautiful Normal Scrolling Bar
Ugly Abnormal Scrolling Bar
This issue is particularly disruptive when working with dark-themed websites. The abnormal scroll bar becomes highly noticeable and can ruin the overall design aesthetic.
Solution
After observing the pattern, I noticed that this issue occurred across various browsers and Electron applications, suggesting it was a system-level problem. Upon further investigation, I discovered the issue stemmed from a compatibility problem in macOS settings. Specifically, the default scroll bar setting in macOS has issues when using third-party Bluetooth mice (other than the Magic Mouse). The scroll bar would appear abnormal whenever a third-party mouse was connected. This explained the inconsistency, as I don’t always use a mouse.
Default Option: "Automatically based on mouse or trackpad"
Changing the setting to "When Scrolling" resolved the issue entirely.
Show scroll bars: "When Scrolling"