JS CSS слайд-меню сжимает содержимое вместо того, чтобы отодвинуть в сторону

Question

Для мобильной версии веб-страницы мне нужно скрыть div и только позволить ему скользить по клику.Затем он должен отодвинуть div рядом с ним.Однако, что я получаю на Safari Mobile, так это то, что div-элемент выдавливается с левой стороны экрана (маленький текст), а отображаемый в данный момент Div частично накладывается и сжимается с правой стороны.Оба берут 50% vW.

Когда я затем манипулирую мобильным экраном двумя пальцами, вздуваю страницу, а затем снова сжимаю ее - и ТОГДА перезагружаю страницу, она появляется так, как должна, нажимая вправоРазделите дальше вправо и его собственное содержимое в нужном размере.

Было бы замечательно, если бы какой-нибудь мастер мог дать мне подсказку, где я хотел бы выкопать / или изменить код.

CSS:

  /* CSS Document */
.menu {
    overflow-x:hidden;
    position:relative;
    left:0;
    }

.menu-opens {
    -webkit-transition:left:70%;
    left:70%;
    }   

.menu-opens .menu-side {left:0px;}  

.menu-side,
.menu {
    -webkit-transition: left 0.3s ease; /*transition does not work*/
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;

}

.menu-side {
    background-color:#00366d;
    border-right: 1px solid #ffb600;
    color:rgb(255,255,255);
    position:fixed;
    top:0;
    left:-50%;
    width:50%;
    height:100%;
    padding:10px;
    }


The js:

(function() {
    var body = $('body');
    $('.menu-toggle').on('click', function() {
        body.toggleClass('menu-opens');
        return false;
        });
    })();