2013年8月27日火曜日

【未検証】モバイルブラウザの不都合な動作

未検証シリーズ.検証するつもりもない.
ここ数日,クロスブラウザと闘い続けているのだが,
(デスクトップブラウザが正しいとすれば)想定外の動作をしてくれることがある.

iOS SafariでiframeのVisibilityがおかしい
<iframe ~~~~ style="visibility:hidden"></iframe>
といった形でiframeにhiddenを設定し,
JavascriptからvisibilityをvisibleにしたりhiddenにしたりするようなHTML.
突然iframeが表示されることがあり,
また,iframeは表示したらhiddenにしても非表示にならない.
なお,デスクトップブラウザやAndroidブラウザではちゃんと非表示になる.
iframeを使うのがそもそもの間違いなんだろうが,
Google Mapsの埋め込みはiframeを使うんだよな.
opacityで非表示にしたりz-indexでレイアウトの後ろにしたり
そういったことで対応できるのかもしれない.
モバイルブラウザ的には埋め込みの表示/非表示ではなく,
Google Mapsのサイトへのリンクが正解なのではと思い,リンクを貼ることにした.

Android 標準ブラウザの画像に対するmax-heightの挙動
<img ~~~ style="max-height:100%" />
といった形で画像をブラウザサイズに抑制する場合,
ページロード時に表示されるアドレスバーの領域を除いて100%と計算される.
まずはまぁこれはいい.
アドレスバーは描画領域に含まれないんだからちゃんと描画している部分が100%だから正しい.
しかし,この状態で画面を引き上げ,アドレスバーをスクロールアウトさせると,
ブロックはスクロール後のより広くなった領域を100%と考えているのに,
imgは描画がおかしくなる.
具体的には描画領域の高さが変更されたのは確認したが,
画像の高さを反映させずに幅だけ変更させる.
つまり,画像が横に伸びるのだ.
スクロールさせて表示するような作りのページならいいが,
1枚絵を表示させるだけのページだと,できれば絵を画面内に収めたい.
だからmax-height指定して画面内に収めたのにアドレスバーが変な挙動を誘発させる.
これは今のところお手上げ.

0 件のコメント:

コメントを投稿