Missing Scrollbars on Mac OS X

For whatever reason, Apple made a pretty big (and in my opinion, stupid) decision regarding their latest OS. The vertical scrollbars are, by default, hidden.

Now, this does not affect FireFox, but it does, however, affect Safari and Chrome. Since we cannot reasonably ask our users to change the settings in their OS, we can do a bit of CSS trickery to make them appear. Note: This will affect the appearence of your scrollbars on all webkit browsers, regardless of OS. The CSS below mimics the look and feel of the Mac OS, but you can tweak it to certain your needs.


::-webkit-scrollbar {	
	width: 7px;
	-webkit-appearance: none;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.5);
	border-radius: 4px;
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

All non-webkit browsers (Internet Explore and Firefox) will ignore this CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.