Menu list not showing in Safari/iOS

I have a menu which is working perfectly in Chrome on Mac and Chrome on Android. But it doesn't work with Safari on Mac and Chrome/Safari on iOS.

The menu items is correctly showed in source code and I can see the elements correctly placed if I hover the code in a browser inspector. The problem is that they are not actually showed in the browsers. It is like they are laying under det rest of the elements. I have tried with z-index without any luck.

Any help is appriciated.

Ember

<div class="goodie-pack-menu">
  <button class="goodie-pack-menu-toggle" >
    <i class="fa fa-bars"></i>
  </button>
  <ul class="goodie-pack-menu-list ">
    <li class="goodie-pack-menu-item" ></li>
    
      <li class="goodie-pack-menu-item" >
        
      </li>
    
  </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