HTML/CSS Safari 块不可见

Question

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

案例：
布局：fixed 顶部标题和 fixed 侧边栏从上到下延伸。

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

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

Image of triggerd navigation item

这仅发生在 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 时，它也会向 ul 添加一个 top: 值。
• 如果我删除下拉 ul 的 position: fixed，它确实会出现在侧边栏内
• 当从下拉列表中删除 left: 值时，上述屏幕截图也适用。

我的同事在Apple site (2014) 上发现了这个带有 Fiddle 示例，如果你在 Safari 中打开它，你可以看到不同之处：http://jsfiddle.net/m287S/1/

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

Answer 1

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