Как корректно настроить swipe menu (slideout.min.js)?

Question

[password22]

Здравствуйте. Сделал на сайт swipe menu, взял отсюда: https://slideout.js.org/

По нажатию все работает корректно. Но когда пальцем выдвигаешь, меню не появляется, а появляется половина пустого пространства под меню, и после еще нескольких оттягиваний меню появляется.




Подскажите пожалуйста, в чем может быть дело. Может кто сталкивался с этим.

У меня подключена библиотека с сайта, что выше, и этот код:

window.onload = function() {
        var slideout = new Slideout({
          'panel': document.getElementById('panel'),
          'menu': document.getElementById('menu'),
          'side': 'right'
        });

        document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
          slideout.toggle();
        });

        document.querySelector('.menu').addEventListener('click', function(eve) {
          if (eve.target.nodeName === 'A') { slideout.close(); }
        });
      };

В css:

.menu {
    background-color: #1D1F20;
    background-image: linear-gradient(145deg, #1D1F20, #404348);
}
.btn-hamburger {
    border: none;
    position: absolute;
    top: 12px;
    left: 12px;
    outline:none;
    background: url('../img/icons/menu.png') no-repeat center;
    width: 50px;
    height: 50px;
  }
.slideout-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 256px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display: none;
  }

.slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
  }

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
  }

.slideout-open .slideout-menu {
    display: block;
  }
.panel {
    text-align: center;
    min-height: 100%;
  }
.panel-header {
      position: sticky;
      top: 0;
      left: 0;
      background: #f3f3f3;
      box-shadow: -1px 2px 15px 5px #d8d4d4;
      z-index: 99;
  }
#panel {
    display: block;
  }
.slideout-menu { left: auto; }
      .btn-hamburger { left: auto; right: 12px;}
      .box { height: 1500px; }

html:

<nav id="menu" class="menu">
		<header id="top">
			<!-- Здесь меню -->
		</header>        
    </nav>

    <main id="panel" class="panel">
        <div class="panel-header">
            <button class="btn-hamburger js-slideout-toggle"></button>
            <!-- Кнопка для вызова меню -->
        </div>

	    <section class="box">
			<!-- Все содержание страницы -->
	    </section>
	</main>

Буду рад любой помощи.
Спасибо