Непонятная прокрутка фона после прокрутки меню на IOS (Safari)

Вопрос касается именно IOS (Safari), на Android все хорошо.
http://testbcard.dtraduga.vh55.hosterby.com/discounts_for_points.php#
Разрешение 1199 и меньше. Появляется меню - Выбрать город и категорию. При клике на него открывается боковое меню и после его прокрутки до самого конца, начинает прокручиваться сам фон сайта. Если прокрутить в обратную сторону, то ситуация повторяется, - как только доходим до верха меню, дальше начинает прокручиваться фон под меню.
Можно ли как-то избавиться от этой непонятной прокрутки фона, после того как само меню просто про крутится до конца?
именно IOS (Safari)!!! Больше пока нигде таких глюков не наблюдал.

 

Меню выглядит так:

HTML:

<div class="navigation_city">
    <nav id="navigation_new">
        <ul>
            <div id="close_select_city"><img src="images/close_big_x.png" alt="Закрыть"></div>
            <li><a href="#">Минск</a><span class="quantity_gold2">250</span></li>
            <li><a href="#">Брест</a><span class="quantity_gold2">25</span></li>
            <li><a href="#">Гродно</a><span class="quantity_gold2">15</span></li>
            <li><a href="#">Могилев</a><span class="quantity_gold2">29</span></li>
            <li><a href="#">Гомель</a><span class="quantity_gold2">45</span></li>
            <li><a href="#">Витебск</a><span class="quantity_gold2">85</span></li>    
        </ul>
    </nav>

Это то что делается с ним в JS:

Код:

var icon = document.getElementById("select_city_new"),
active = false,
body = document.body,
nav = document.getElementById("navigation_new"),
navCity = document.getElementsByClassName("navigation_city")[0],
close_select_city = document.querySelector("#close_select_city>img"),
area = document.getElementById("area");
icon.addEventListener("click",activeMenu);

function activeMenu(){
        close_select_city.onclick = function(){
        document.body.style.overflow = 'scroll';  
        nav.style.left = "100%";
        nav.style.height = "0";
        navCity.style.height = "auto";
        button.disabled = false;
        nav.style.overflow = "hidden";
        active = false;
    }
    if(active){
        nav.style.left = "100%";
        nav.style.height = "0";
        nav.style.overflow = "hidden";
        navCity.style.height = "0";
        button.disabled = false;
        document.body.style.overflow = 'auto';
        active = false;

    }else{
        nav.style.left = "0";
        nav.style.height = "100%";
        button.disabled = true;
        nav.style.overflow = "scroll";
        navCity.style.height = "auto";
        document.body.style.overflow = 'hidden';
        active = true;
    }
}

navCity.style.height = "0";
navCat.style.height = "0";