div входит в окно просмотра справа, хотя он был размещен слева на Android

Question

Я делаю приложение со стероидами appgyver для 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});

Answer 1

Вместо margin-left вы можете попробовать использовать свойство 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, когда целевой элемент имеет только класс.