Question

我正在为iOS和iOS制作appgyver类固醇应用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

您可以尝试使用left属性，而不是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。

div从右侧进入视口，虽然它放在android的左侧

1 个答案: