Safari/iOS 中未显示菜单列表答案

【问题标题】：Menu list not showing in Safari/iOSSafari/iOS 中未显示菜单列表
【发布时间】：2017-03-16 15:23:48
【问题描述】：

我的菜单在 Mac 上的 Chrome 和 Android 上的 Chrome 中运行良好。但它不适用于 Mac 上的 Safari 和 iOS 上的 Chrome/Safari。

菜单项在源代码中正确显示，如果我将代码悬停在浏览器检查器中，我可以看到正确放置的元素。问题是它们实际上并未显示在浏览器中。就像他们躺在其他元素之下。我试过 z-index 没有任何运气。

如有任何帮助，我们将不胜感激。

灰烬

<div class="goodie-pack-menu">
  <button class="goodie-pack-menu-toggle" {{ action "toggleMenu" }}>
    <i class="fa fa-bars"></i>
  </button>
  <ul class="goodie-pack-menu-list {{ if open 'goodie-pack-menu-list--open' }}">
    <li class="goodie-pack-menu-item" {{ action "setFilterId" null }}>{{ t 'generic.all' }}</li>
    {{#each goodiePack.menuItems as |menuItem| }}
      <li class="goodie-pack-menu-item" {{ action "setFilterId" menuItem.id }}>
        {{ menuItem.name }}
      </li>
    {{/each}}
  </ul>
</div>

CSS

.goodie-pack-menu
  width: 100%
  height: 100%

  &-toggle
    width: 100%
    height: 100%
    background: white
    border: none
    display: block
    z-index: 200000

  &-list
    position: fixed
    width: 100%
    margin: 0
    padding: 0
    left: 0
    list-style: none
    background: #f9f9f9
    display: none    

    &--open
      display: block

  &-item
    padding: 20px 0
    text-align: center
    pointer-events: all

【问题讨论】：

也发布 CSS，或者在 JSfiddle 或 codepen 上工作演示
它现在应该在那里。 .sass / ember 格式

标签： javascript css safari

【解决方案1】：

只需将位置添加到 &-toggle：

&-toggle
    width: 100%
    height: 100%
    background: white
    border: none
    position: relative
    display: block
    z-index: 200000

【讨论】：

没有做到这一点:(如果我将菜单项推到它们应该在的位置，菜单项实际上可以工作。也许这些信息可以帮助你？
似乎另一个类（.large-header）正在“阻塞”：溢出：隐藏。但问题是我们将其用于另一件事，即在向下滚动时在标题中显示一些信息。

【解决方案2】：

我通过设置溢出来解决它：在我的 .large-header 中可见，然后溢出：隐藏在容器中。

【讨论】：