Safari 6 doesn't show scrollbar in OSX mountain lion

问题

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.

回答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.

来源：https://stackoverflow.com/questions/13017546/safari-6-doesnt-show-scrollbar-in-osx-mountain-lion

标签

safari