Edited at

web開発においてiPad iOS8 Safari でうまく動かなかったこと


iPad iOS8 Safari

もしかしたらiPad iOS8 Safariという組み合わせだけの問題ではないかも知れません(それぞれ単体でも再現するかも知れません)。中にはSafariだけでなくChromeでも再現するものもありました。


1.セレクトリストでvalue値を取得するときにjQueryの.val()だと取得できない


対応...:writing_hand_tone1:

on changeイベントでe.target.valuedocument.getElementById('selectLists').valueで取得できました。


2.セレクトリストで動的にリストを変えている場合に何かを選択してしまう(ユーザーが選択するまで何も選択させたくない)


対応...:writing_hand_tone1:

この記事でやっているように動的にセレクトリストの内容を変更している場合に、変更後何かを選択してしまっている状態になってしまうのを回避したかったのです。

$("#selectLists").prop("selectedIndex", -1);のようにすると選択を解除できます。

ちなみに試していないですが-1でなく0でも良いかも知れません。


3.styleのdisplay: flex;がついていると想定通りの表示にならない


対応...:writing_hand_tone1:

display: block;とかに変えました。。。

他のブラウザでは中央寄せになっているのにiPadだけでは左寄せになっていたり、そもそもそのスタイルをつけている要素が表示されていなかったりしました。

この問題はweb上にも沢山報告されていました。


まだあるかも

また他にも見つけたら随時更新します。

そしてここに挙げたものはあくまでも'対応例'としてお考えください。