div enters viewport from the right although it was placed on the left on android

Question

I'm making an app with appgyver steroids for iOS & Android and I found this weird bug. That although the div is fully positioned to the left of the viewport it enters the viewport from the right on android, where it behaves as expected on 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

Instead of margin-left, you could try with left property, as your element is already positionned:

.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;
}

To prevent misunderstanding of jQuery, I'll recommand use CSS class for animation than animate() method (smoother on mobile devices).

Your new CSS class :

.drawer.onScreen {
   left: 0;
}

Your new JS :

$('.drawer').addClass('onScreen');

By the way, note that your old JS code use getELementByID when the element you target only has a class.