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

私はオーバーフローを設定することで、それを解決しましたオーバーフロー：コンテナに隠されています。

Answer 2

だけ& -toggleに位置を追加します。私の.large-ヘッダーに見える：

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