javascript - HTML/CSS Safari block 不可见

Question

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

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

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

问题:
当悬停在导航栏上时，悬停有效，但悬停的元素不可见(查看屏幕截图)。

Image of triggerd navigation item

这仅发生在 Safari 中，即使在 IE11 中也有效。

尝试过的选项:

• z-index 在悬停的元素上；
• 改变显示模式；
• 将 ul 更改为 div；
• 为元素重新应用背景；
• 将多个元素的 overflow 更改为 visible；
• 向“打开的”导航 block 添加了不透明度。

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 无法处理 absolute 定位元素上的 overflow。所以我最终重写了主导航，现在它可以工作了。