菜單列表未在Safari / iOS中顯示

Question

我有一個菜單，該菜單在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

Answer 1

只需添加位置並切換：

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

Answer 2

我通過設置溢出：在我的.large標頭中可見，然后溢出：隱藏在容器中來解決它。