Question

我正在尝试在jquery mobile中完成弹出动画中的简单幻灯片。我在桌面浏览器（chrome和firefox）上测试了这个并且运行正常。但在移动设备上，我按下按钮后得到以下结果：
弹出窗口很好，但在屏幕右侧创建一个空白区域，如果用户向右滑动，则可以看到该空白区域。取消弹出窗口会删除此空白区域。仅当使用“幻灯片”转换触发弹出窗口时才会发生这种情况。有谁知道这种行为的原因。

Popup after pressing button
white space due to slide transition

我可以手动调整窗口大小，但我不确定弹出窗口滑动后会发生什么事件。

~~（我有图像显示这个，但我没有10个代表所以我不能发布它们:(）~~

有谁知道为什么会这样。我正在测试Droid Razr Maxx（运行Jelly Bean）。我已经使用chrome，firefox和设备上的默认浏览器进行了测试。它们都产生相同的结果。这是我的代码：

<!DOCTYPE html>
 <html ng-app>
   <head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
   </head>
   <body>
     <div data-role="page">
      <a href="#pop" data-role="button" data-rel="popup" data-transition="slide">Pop Up</a>
      <div data-role="popup" id="pop" data-overlay-theme="a">
       <p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
      </div>
     </div>
  </body>
</html>

Answer 1

经过进一步研究，我发现此问题已在最新版本的jquery mobile（1.4）中修复，该版本仍处于alpha阶段。

http://jsbin.com/edeluh/32

jquerymobile幻灯片动画增加了窗口宽度

1 个答案: