具有隐藏滚动条的Lion / Mountain Lion上的CSS悬停错误

Question

I have a list where a button shows up inside each list item when you hover over it. The button is on the right edge of each list item. This works fine when the list doesn't need to scroll, but it doesn't work properly when scrolling is needed on Lion/Mountain Lion in Safari with hidden scrollbars. It seems the CSS hover state of the underlying item is removed when the mouse is over the hidden scrollbar area so the button disappears.

I've reproduced the problem here:

http://jsfiddle.net/upsT3/

Does anyone know of a solution/workaround for this?

Markup:

<div id="list1" class="list">
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
</div>
<br />
<br />
<div id="list2" class="list">
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>   
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div> 
</div>

CSS:

.list {
    height: 200px;
    width: 300px;
    border: 1px solid gray;
    overflow: auto;
}

.list div {
    padding: 5px 0px 5px 5px;
    border-bottom: 1px solid #eee;
}

.list div:hover {
    background: #eee;
}

.list button {
    float: right;
    display: none;    
}

.list div:hover button {
    display: block;
}

Answer 1

Adding position: relative; to .list seems to get rid of the hover problem in Safari, but the click issue persists.

http://jsfiddle.net/zZWPq/

Oddly enough, the containing div registers the click, while button does not. Hiding the scrollbar altogether would of course get rid of the problem, but that's bad UX, strongly discouraged and really shouldn't be considered an option. Will report back if I find something else though.