Fixed positioned div hidden on Safari

Question

Following a previous question - Overflow issue in a fixed position sidebar - I have a list of links with a fixed div showing on li:hover

http://codepen.io/anon/pen/RNxyVP

This works great on all the windows browsers - Chrome, Firefox, Explorer, Opera, and old windows Safari. However on the latest edition of Safari (on Mac) and by extension on iOS the fixed div reveal stays in the grandfather fixed div, and doesn't float over the rest of the page. This also happens on android chrome.

Is there a way to have the fixed div float over the page, and not be restricted to the wrapper - on these browsers?

The other factors such as the wrapper div being scrollable (currently through overflow-x: hidden;) would also have to be kept/

Answer 1

because you set your sidebar-wrapper 'position:fixed', in Mac's webkit browser, if an fixed element has a fixed overflow:hidden parent, this element will be hidden.