Я делаю приложение с apppyver steroids для iOS и Android, и я нашел эту странную ошибку. Хотя div полностью расположен слева от окна просмотра, он входит в область просмотра справа на Android, где он ведет себя как ожидалось на iOS.
CSS
.drawer {
z-inder:100000;
position: fixed;
height: 100%;
width:80%;
margin-left: -80%;
background-color: #111111;
}
Javascript
$(document.getElementById('drawer')).animate({'margin-left': '0%'}, {queue: false});
Вместо margin-left вы можете попробовать с левым свойством, поскольку ваш элемент уже расположен:
.drawer {
z-inder:100000;
position: fixed;
height: 100%;
width:80%;
left: -80%;
background-color: #111111;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Чтобы предотвратить непонимание JQuery, я рекомендую использовать класс CSS для анимации, чем метод animate() (более плавный на мобильных устройствах).
Ваш новый класс CSS:
.drawer.onScreen {
left: 0;
}
Ваш новый JS:
$('.drawer').addClass('onScreen');
Кстати, обратите внимание, что ваш старый JS-код использует getELementByID, когда у элемента, на который вы нацеливаетесь, есть только класс.