Popupを閉じたときの動作について

[akihiro suda]

はじめまして。須田と申します。

よろしくお願いいたします。

さて、jQuery mobile 1.2で追加されたPopupウィジェット、カッコいいので使ってみたところ、

単一ページや複数ページでも１ページ目では問題ないのですが、２ページ目以降で使用した場合、

Popupを閉じたときにページの先頭に移動してしまいます。

こういったLightBox系のウィジェットは、（ウィンドウをスクロールした状態でも）その場で開いてその場で閉じるところに意味があると思うので非常に残念です。

デスクトップブラウザではこの現象は発生せず、確認できたのはiPhone, iPadのMobile Safariだけです（Androidでは確認していません）。

仕方なく

　Popupを開く前のスクロール位置を取得→閉じたらsilentscrollで元のスクロール位置に戻る

という方法でしのいでいますが、一瞬でもページトップに移動してから戻ってくるので気持ちよくありません。

これは、Mobile Safari（iOS）側の仕様が変わらない限り解消できないのでしょうか。

[Toru Yoshikawa]

須田さん

吉川です。

どうもiOS絡みのバグのようですね。
ハッシュ付きのURLでクエリパラメータが変化すると
iOSではスクロールトップに戻るという挙動のようです。
(この場合、"?ui-dialog=うんぬん"が消えるとスクロールトップに戻るようです)

とりあえずの対処としては、以下の設定を加えて頂くと正常に動作するかと思います。

$(document).on('mobileinit', function(){
$.mobile.hashListeningEnabled = false;
});

基本的にURL直打ちでページ遷移しなくなるだけで、
実際の利用には特に問題がないはずですが、念のためテストしたほうが
良いかと思います。ご参考までに。



2012年11月27日 0:02 akihiro suda <asu...@gmail.com>:

> --
>
>



--
Toru Yoshikawa
mail: pikotea[at]gmail.com
twitter: yoshikawa_t
blog: http://d.hatena.ne.jp/pikotea/

[Toru Yoshikawa]

訂正。。

> 基本的にURL直打ちでページ遷移しなくなるだけで、

test.html#page2の#page2の部分を直打ちしてもページ遷移しなくなる

[akihiro suda]

吉川様

早速のアドバイス、ありがとうございました。

ご教示いただいた通りにしたら、スクロールトップに戻ってしまう現象は解消しました。

$.mobile.hashListeningEnabled = false; でググると、

複数ページではまともに動かなくなるなどの情報もありましたが、特段問題はないようです。

PCやタブレットに慣れていないユーザー向けのWebアプリなので、

どこにいたのか分からなくなってしまうのを危惧して、Popupウィジェットの使用を躊躇していましたが、

安心して実装することができます。

ありがとうございました。

2012年11月27日火曜日 16時29分22秒 UTC+9 Toru Yoshikawa:

[Toru Yoshikawa]

須田さん

解決したようで何よりです！

早速、修正が入りましたので次のメンテナンスリリースの
1.2.1では何もしなくても問題なくなるかと思います。

Issue
https://github.com/jquery/jquery-mobile/issues/5334

Commit log
https://github.com/jquery/jquery-mobile/commit/9bbe152a8b923282698fa65b2a250df16ace6bcc



2012年11月28日 8:57 akihiro suda <asu...@gmail.com>:

> --

[akihiro suda]

吉川さん

開発者にコンタクトしていただいたんですね。

ありがとうございます。

また、短い英文で的確に問題点を伝える能力が必要だと痛感しました。

2012年11月28日水曜日 11時26分16秒 UTC+9 Toru Yoshikawa:

[Toru Yoshikawa]

須田さん

いえいえ、英語できないので短文になるだけですｗ

Good coding :)


2012年11月28日 12:22 akihiro suda <asu...@gmail.com>:

[akihiro suda]

Dec 3 23:35:42 2012 +0200 のバージョンで改善されていることを確認できました。

ところが、チェックボックスの挙動がおかしかったり、他にもスクリプトが動作しない現象が発生したので、

1.2.0に戻しました。

というか、不具合が出たので原因を調べていくうち、

http://code.jquery.com/mobile/latest/jquery.mobile.min.js

から読み込んでいるのが怪しいと疑って、

http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

に書き換えたら、チェックボックス等の不具合が解消されたので、アップデートに気づいたというのが真相です。