jQueryMobile1.2でheaderまたはfooter内にnavbarを設置した場合の挙動

[kumeichi]

いつもお世話になっております。

粂内と申します。

jQueryMobile1.2の対応調査を行なっていて、原因不明の事象が発生した為、投稿させて頂きます。

件名のとおりなのですが、jQueryMobile1.2で、headerまたはfooter内にnavbarを設置すると、

スクロールの挙動がおかしくなってしまいます。（viewportの挙動なのでしょうか？）

通常、ウィンドウをスクロールすると、ウィンドウ自身の範囲内でのみスクロールし、ウィンドウ自体をドラッグするような操作は行えないはずです。

しかし、上記条件の場合のみウィンドウ自体がドラッグするような操作が可能となり、スワイプを行うとウィンドウ自体が動いてしまいます。

jsdo.it上にfooterにnavbarがある場合とない場合のものを用意していますので、ご確認いただければと思います。

• navbarあり: http://jsrun.it/kumetter/rKC0
• navbarなし: http://jsrun.it/kumetter/s78h

この問題について、詳しい方はいらっしゃいますでしょうか。

何か知っていることがあれば、ご教授いただければと思います。

※事象の発生を確認した端末はiPhone4S(iOS6)、 iPod touch(iOS5.1)、iOSシミュレーター(iOS6)、galaxyS(Android2.3)になります

※jQueryMobile1.1.1ではこの事象は発生しませんでした。

以上、よろしくお願い致します。

[Toru Yoshikawa]

粂内さん

吉川です。

画面がdraggableのようになるのは、恐らく画面幅がデバイスの幅を超えているせいだと思われます。
jQuery Mobile 1.2では、navbarの幅の調整がずれていて、スタイルで調整する必要があります。
次のスタイルを当ててみてください。

.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn, .ui-footer
.ui-navbar .ui-grid-b li.ui-block-c .ui-btn {
margin-right: -1px;
}




2012年10月18日 16:50 kumeichi <kume...@gmail.com>:

> --
>
>



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

[kumeichi]

吉川さま

早速の返信ありがとうございます！

スタイルの適用で問題なく動作するようになりました。

ありがとうございます！

2012年10月18日木曜日 17時23分56秒 UTC+9 Toru Yoshikawa: