Блок HTML / CSS Safari не виден

Question

У меня небольшая проблема с компоновкой в ​​Safari, и я не могу понять, что происходит.

Дело:
Макет: fixedверхний колонтитул и боковая панель fixed, простирающаяся сверху вниз.

Боковая навигация имеет элемент наведения, который запускается с использованием Javascript.

Проблема:
При наведении курсора на панель навигации наведение работает, но элемент наведенияне отображается (проверьте снимок экрана).

Изображение сработавшего элемента навигации

Это только происходит в Safari, даже в IE11 работает.

Опции опробованы:

• z-index на предмете поиска;
• изменение режима отображения;
• изменениеul в div;
• повторное применение background к элементу;
• изменено overflow на visible для нескольких элементов;
• добавлено opacity к «открытому» блоку навигации.

html (не инициируется 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 (инициируется 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>

При этом запускается следующий css (используя scss btw):

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

Примечания:

• При запуске Javascript добавляется top: значение для ul.
• Если я удаляю position: fixed из раскрывающегося списка ul, он появляется внутри боковой панели
• Приведенный выше снимок экрана также применяется при удалении значения left: извыпадающий список.

Мой коллега обнаружил это на сайте Apple (2014) с примером Fiddle. Если вы откроете его в Safari, вы увидите разницу: http://jsfiddle.net/m287S/1/

У кого-нибудь есть идеи, почему его не видно?