Question

This is so weird. Safari 6 doesn’t seem to show a scrollbar on elements with overflow-y: scroll.

<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>​

ul {
    background: #f1f1f1;
    width: 400px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

li {
    height: 50px;
    line-height: 50px;
    background: #c1ffff;
    margin-bottom: 3px;
}​

I don’t want to force the scrollbar because of performance issues in my app and it looks ugly when it’s always there. Does anyone know of a way to fix this?

Firefox always shows my scrollbar which I’m fine with and chrome renders it perfectly, only showing the scrollbar on actual scroll.

I’ve created a fiddle showing the issue: http://jsfiddle.net/mWT3X/

Update: Confirmed that it does render in Safari 5 but not 6.
Update2: This is specifically related to the show scroll bar settings in the system settings. If I set show scroll bars to always it will work fine.

Answer 1

In Safari 6.0 there was a WebKit bug that would cause elements with “overflow: scroll” set to not display the new overlay style of scrollbars. This issue was resolved in Safari 6.0.1.