スマートフォンとposition:fixedのバグ

iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。

Androidではuser-scalable=noが必須

<meta name="viewport" content="user-scalable=no" />

Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。

サンプル（user-scalable=noあり）
サンプル（user-scalable=noなし）

iPhoneでURLに#がついた状態だとバグる

iPhone(iOS5)でURLの末尾に#がついた状態でスクロールすると固定配置した要素が出たり消えたりします。

サンプル

ページ移動後もどってきたら位置がおかしい

iPhone(iOS5)で他ページに移動後、戻るボタンでページにもどると表示位置がずれてます。

サンプル（スクロール後リンク先に遷移してもどる）

あと、こういうのも見かけました。
user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

というわけで実務的にはほとんど使えない気がするわけです。

関連エントリー

スマートフォンサイトをデザインする上で知っておくべき10のTIPS
AndroidとjQueryのスライドアニメーションの不具合
Androidのposition:absoluteとフォームの問題
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
Androidでfont-weight:boldを適用する方法

スポンサードリンク

«WiMAXのホームルータ（URoad-Home）を試してみた | メイン | jQueryデザイン入門がAmazonの2011年Best Booksで11位に！»