position fixedでiframeを呼び出した際のスクロールについて

Question

index.htmlにてハンバーガーメニューをクリックで、iframeのメニューコンテンツをposition: fixed;で呼び出したいと考えています。
スマホ実機で確認したのですが、ハンバーガーメニューを押してiframeが表示されるまでの一瞬の間にindex.htmlの表示部分を触ってしまうと、
iframeが表示されてもスクロールできなくなってしまいます。（後ろのindex.htmlの部分がスクロールしているようです。）
iframeが完全に表示されてからメニュー部分を触ると、問題なくスクロールはできる状態です。

こちら解決方法はありますか？

<div class="open"></div>
<div class="iframe-wrap">
	<iframe src="panel-menu.html" frameborder="0" scrolling="yes" id="iframe"></iframe>
</div>

.iframe-wrap {
  position:fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #fff;
  -webkit-overflow-scrolling:touch !important;
  z-index: 60;
}

#iframe {
  width: 100%;
  height: 100vh;
}

$(document).ready(function($){	
 $('.iframe-wrap').hide();
 $('.open').click(function() {
   $('.iframe-wrap').show();
 });
});

$(window).on("load", function(e){
 $("#iframe").contents().find(".close").on("click", function(e){
   $('.iframe-wrap').hide();
 });
});