HTML/CSS Safari 块不可见

Question

我在使用 Safari 时遇到了一些布局问题，似乎无法弄清楚发生了什么。

案例：
布局：fixed 顶部 header 和一个从上到下延伸的 fixed 侧边栏。

侧边栏导航有一个悬停元素，使用 Javascript 触发。

问题：
悬停在导航栏上时悬停有效，但悬停的项目不可见（查看屏幕截图）。

Image of triggerd navigation item

这仅发生在Safari中，即使在IE11中也能正常工作。

尝试的选项：

z-index 在悬停的项目上；
更改显示模式；
将 ul 更改为 div;
re-applying一个background到项目;
将多个项目的 overflow 更改为 visible；
已将 opacity 添加到 'opened' 导航块。

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）：

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

备注：

当 Javascript 被触发时，它也会向 ul 添加一个 top: 值。
如果我删除下拉列表 ul 的 position: fixed，它会出现在边栏内
从下拉列表中删除 left: 值时，上面的屏幕截图也适用。

我的同事在 Apple site (2014) with an example Fiddle, if you open it in Safari you can see the difference: http://jsfiddle.net/m287S/1/

上发现了这个

有人知道为什么它不可见吗？

Answer 1

最终发现 Safari 无法处理 overflow absolute 定位元素。所以我最终重写了主导航，现在可以了。

HTML/CSS Safari 块不可见

HTML/CSS Safari block not visible

html

javascript

css

safari

cross-browser