Hover over Lion / Mountain Lion with hidden scrollbars

Question

I have a list in which a button appears inside each list item when you hover over it. The button is located on the right edge of each item in the list. This works great when the list does not need to be scrolled, but it does not work properly when scrolling is needed for a lion / mountain lion on a safari with hidden scrollbars. It seems that the CSS hover state of the base element is removed when the mouse is over the hidden area of ​​the scroll bar, so the button disappears.

I 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; in .list seems to .list hover problem in Safari, but the click issue persists.

http://jsfiddle.net/zZWPq/

Oddly enough, the containing div registers a click, but the button does not. Hiding the scrollbar as a whole, of course, will get rid of the problem, but this bad UX is very discouraged and really should not be considered an option. Will report if I find anything else.