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/

Motherwort

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.

Bobbe

While not wrong, suggestions for a workaround or something would be ideal. – Die

Answer 2

  please check this
  #sidebar-wrapper {       
    width:200px;    
    background-color:#396DA5;   
    position:fixed; 
    height: 100%;  
                 }

    #menu ul ul {   
    display: none; 
    list-style: none;
    }  
    #menu ul  li:hover > ul
    {       
     display: block;    
    }
    #menu ul ul { 
    padding:50px;   
    position: absolute; 
    left: 150px;  
    background:#f00; 
    margin-top:-20px;
    }

Banish

The sidebar wrapper needs to be scrollable as in the original question. It would need to show the fixed div with all the other factors being the same. Thanks – Motherwort