jquery モバイルのポップアップ アニメーションで簡単なスライドを作成しようとしています。これをデスクトップ ブラウザ (chrome と firefox) でテストしたところ、問題なく動作しました。しかし、モバイルでは、ボタンを押すと次の結果が得られます。
ポップアップは正常に表示されますが、画面の右側に空白が作成され、ユーザーが右にスライドすると表示されます。ポップアップを閉じると、この空白が削除されます。これは、「スライド」トランジションを使用してポップアップがトリガーされた場合にのみ発生します。この動作の理由を知っている人はいますか。
ウィンドウのサイズを手動で変更できますが、ポップアップがスライドインした後にどのイベントが発生するかわかりません。
(これを示す画像がありましたが、担当者が 10 人いないので投稿できません:( )
なぜこれが起こっているのか誰にも分かりません。Droid Razr Maxx (Jelly Bean を実行) でテストしています。デバイスのクロム、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>