[不具合対応]iOS hoverの位置がずれる

iOS7.1.2で確認　jQuery Mobileに限ったことではないようですがタップした位置とは違う位置のボタンがhoverとしてハイライトされてしまいます。
jQuery Mobileのlistviewではhoverがついたボタンがたくさんならんでいるためこの問題が分かりやすく出てしまいますが、通常のホームページの場合はあまり問題にならないのではないかと思います。

対応方法はバグ(? 仕様の可能性有り)が修正されるのを待つのが良さそうです。

以下の動画はjQuery Mobileでは擬似的にhoverを実現しているようなので、問題を分かりやすくするためにjsは動作しないようにしてあります。

調査1
aやliにtouchstartをバインドすると問題がおきる。バインドされた関数内では何も実行しなくても問題が起きる。JQMはtouchstartをバインドしているので問題が起きているようです。「touchstartをバインドするとsafariはhoverを有効にする」という記述が他の方のブログににもありました。

調査２
touchstartをバインドするとsafariはclientYとpageYを勘違いしてhover処理を行っているようです。

jQuery,jQuery Mobileは関係ないようですがあまり問題にあがってない所をみるとなんらかの環境依存かもしれません。

[不具合対応] iosでclickイベントが発生しない

jQuery Mobileとは直接関係ありませんが、fieldsetの中にいれたlegendにclickイベントを割り当てた所、ios以外は動作するにも関わらずiosだけはイベントが発生しなかった問題が行りましたので対応方法を調べました。

legendは駄目ですがlabelは問題ありませんでした。ios7.1.2で問題が起こっていました。

対応方法

onclick="" をつける

<legend onclick="">

パフォーマンス改善

経験則としてわかったことを記載しておきます。

全体として 

• vlickを使用する
• アニメーションはできるだけ使用しない
• Panel, Popupなどの共通部品はdiv(data-role="page")の外に移動する

ポップアップを早く表示する

• ポップアップのベースとなるdivにui-overlay-shadowをつけない。(ipad2でも体感できる差が出ました)

 フォームの改善

•  selectの選択肢が多くなると拡張する際の時間が悪化するようので少なくするかテキストインプットもしくは専用の選択ダイアログを作る。(拡張時に走査する対象がoptionの分だけ増えるから？)

パフォーマンス改善の参考になるページ

•  jQuery Mobile Optimizing Peformance
• jQuery Mobileの開発リードの方のスライドです。