Код не работает на мобильном телефоне

Question

Так что я сделал сайт, ничего особенного, просто узнав, как работает JavaScript.

Рабочий стол он работает очень хорошо. Когда я сделать мой JavaScript выглядеть

function menu(){ 
menuButton = document.getElementById('button_menu'); 
nav = document.getElementById('menu'); 
content = document.getElementById('content'); 

if (menuButton.classList != 'active'){ 
    //Then Move Content and Nav 
    menuButton.classList.add('active'); 

    content.classList.remove('moveContentBack'); 
    content.classList.add('moveContent'); 

    nav.classList.remove('moveNavBack'); 
    nav.classList.add('moveNav'); 
} 
else{ 
    menuButton.classList.remove('active'); 

    content.classList.remove('moveContent'); 
    content.classList.add('moveContentBack'); 

    nav.classList.remove('moveNav'); 
    nav.classList.add('moveNavBack'); 

} 
} 

На Mobile код работает лучше.

function menu(){ 
menuButton = document.getElementById('button_menu'); 
nav = document.getElementById('menu'); 
content = document.getElementById('content'); 

if (menuButton.classList != 'active'){ 
    //Then Move Content and Nav 
    menuButton.classList.add('active'); 

    content.style.webkitTransform = "translate3d(200px, 0px, 0)"; 
    nav.style.webkitTransform = "translate3d(0px, 0px, 0)"; 
} 
else{ 
    menuButton.classList.remove('active'); 

    content.style.webkitTransform = "translate3d(0px, 0px, 0)"; 
    nav.style.webkitTransform = "translate3d(-100px, 0px, 0)"; 
} 
} 

Мне очень нравится, как она на Desktop

По какой-то причине он просто не работает так. Если вы хотите просмотреть мой сайт, посмотрите, как он работает (на мобильном и рабочем столе), посмотрите skarchmittest2.tumblr.com

Я знаю, что могу сделать его универсальным и сделать его простым, но я добавил эти классы чтобы сделать это своего рода подпрыгивание.

.active{ 
background: red !important; 
} 
.moveContent{ 
-webkit-animation: moveContentBounce .5s; 
animation: moveContentBounce .5s; 
/*-webkit-transform: translate3d(200px, 0px, 0) !important;*/ 
} 
.moveContentBack{ 
-webkit-animation: moveContentBackBounce .5s; 
animation: moveContentBackBounce .5s; 
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/ 
} 
.moveNav{ 
-webkit-animation: moveNav .5s; 
animation: moveNav .5s; 
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/ 
} 
.moveNavBack{ 
-webkit-animation: moveNavBack .5s; 
animation: moveNavBack .5s; 
/*-webkit-transform: translate3d(-100px, 0px, 0)!important;*/ 
} 

@-webkit-keyframes moveContentBounce{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
50%{-webkit-transform: translate3d(230px, 0px, 0);} 
100%{-webkit-transform: translate3d(200px, 0px, 0);} 
} 

@-webkit-keyframes moveContentBackBounce{ 
0%{-webkit-transform: translate3d(200px, 0px, 0);} 
20%{-webkit-transform: translate3d(210px, 0px, 0);} 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 

@-webkit-keyframes moveContent{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/ 
100%{-webkit-transform: translate3d(200px, 0px, 0);} 
} 

@-webkit-keyframes moveContentBack{ 
0%{-webkit-transform: translate3d(200px, 0px, 0);} 
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/ 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 

@-webkit-keyframes moveNav{ 
0%{-webkit-transform: translate3d(-100px, 0px, 0);} 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 
@-webkit-keyframes moveNavBack{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
100%{-webkit-transform: translate3d(-100px, 0px, 0);} 
} 

и исходное состояние этих объектов

#content{ 
    z-index: 100; 
    background: white; 
    position: absolute; 
    transition: 0.2s ease-out; 
    display: block; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
}  
nav#menu{ 
position: absolute; 
min-height: 100vh; 
width: 300px; 
background: gray; 
-webkit-transform: translate3d(-100px, 0px, 0); 
} 

Существует несколько закомментирована код, и это то, что я пытался заставить его работать универсально, как это делает на рабочем столе.

В принципе, я не уверен, почему -webkit-transform CSS PROPERTY не работает на iOS, но использует JavaScript и .style.webkitTrasform = ""; делает. Я сделаю его совместимым с другими браузерами, как только я получу это разобраться.

Answer 1

Не на 100% уверены, но, как вы можете видеть на http://caniuse.com/#search=webkit-transform, есть только частичная поддержка webkit-transform для iOS. Цитата оттуда:

Частичная поддержка относится к отсутствию поддержки фильтра или ошибкой результата от эффектов. Спецификация фильтра фильтров CSS находится в работе, которая заменила бы этот метод .

Так что, возможно, вам нужно некоторое время поддерживать js-решение.

Answer 2

В моей JavaScript, все, что я должен был сделать, это добавить

window.location="#scroll"; 
    window.location="#someotherObject"; 

Эти два объекта являются невидимыми (Непрозрачность: 0 и а не по выбору), и позиционируется абсолютно в том же месте. Работает как шарм.