javascript - CSS hover bug on Lion/Mountain Lion with hidden scrollbars -

I have a list where a button is shown inside each list item when you rotate it on each list On the right edge of the item. It works fine when there is no need to scroll the list, but it does not work properly when it needs to scroll to the Sher / Mountain Lion in Safari with hidden scrollbar. It seems that the CSS hover position of the underlying item is removed when the mouse is more than the hidden scrollbar area, so the button disappears.

I have reproduced the problem here:

  & lt; Div id = "list1" class = "list" & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Br / & gt; & Lt; Br / & gt; & Lt; Div id = "list2" class = "list" & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; Foo & LT; Button & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 CSS:  
  .list {height: 200px; Width: 300px; Border: 1 px solid gray; Overflow: Auto; } .list div {padding: 5px 0px 5px 5px; Border bottom: 1px solid #eee; } .list div: hover {background: #eee; } .list button {float: true; display none; } .list div: hover button {display: block;    
 
 
 add  position: relative;  to .   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 Being completely hidden from the problem gets rid of the problem, but it is a bad UX, strongly discouraged and should not really be considered an option. If I find anything else then report back.