HTML/CSS Safari block not visible

Question

I'm having a bit of a layout issue with Safari and can't seem to figure out what is going on.

Case:
Layout: fixed top header and a fixed sidebar stretching from top to bottom.

The sidebar navigation has a hover element which is triggered using Javascript.

Issue:
When hovering over the nav bar the hover works, but the hovered item is not visible (check screenshot).

Image of triggerd navigation item

This only happens in Safari, even in IE11 it works.

Options tried:

• z-index on the hovered item;
• changing the display mode;
• changing the ul into a div;
• re-applying a background to the item;
• changed overflow to visible on multiple items;
• added opacity to 'opened' navigation block.

html (not triggerd by Javascript):

<ul>
  <li>
    <a class="navigation--dropdown-trigger" href="#">
      <svg class="icon navigation--icon">
        <use href="#icon--user" xlink:href="#icon--user"/>
      </svg>
      <div class="navigation--text">Admin</div>
      <svg class="icon navigation--dropdown-icon">
        <use href="#icon--arrow" xlink:href="#icon--arrow"/>
      </svg>
    </a>

    <ul>
      <li><a href="{{ route('users.index') }}">Gebruikersbeheer</a></li>
    </ul>
  </li>
</ul>

html (triggerd by Javascript):

<ul>
  <li>
    <a class="navigation--dropdown-trigger open--dropdown" href="#">
      <svg class="icon navigation--icon">
        <use href="#icon--user" xlink:href="#icon--user"/>
      </svg>
      <div class="navigation--text">Admin</div>
      <svg class="icon navigation--dropdown-icon">
        <use href="#icon--arrow" xlink:href="#icon--arrow"/>
      </svg>
    </a>

    <ul>
      <li><a href="{{ route('users.index') }}">Gebruikersbeheer</a></li>
    </ul>
  </li>
</ul>

This runs the following css (using scss btw):

&.navigation--dropdown-open ~ ul
{ display: block; }

Notes:

• When the Javascript is triggerd it adds a top: value to the ul as well.
• If I remove position: fixed of the dropdown ul, it does appear inside the sidebar
• The above screenshot also applies when removing the left: value from the dropdown.

My colleague found this on the Apple site (2014) with an example Fiddle, if you open it in Safari you can see the difference: http://jsfiddle.net/m287S/1/

Anyone have an idea why it's not visible?

Answer 1

Eventually figured out that Safari can't handle overflow on absolute positioned elements. So I've eventually ended up rewriting the main navigation, now it works.