スマートフォンと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位に!»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/711
コメントを投稿