Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ

表題のとおりですが、少しわかりにくいので詳しく説明します。

このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。

ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。

HTML/CSSはこんな感じ。

<div id="a"></div>
<div id="b"><div></div></div>
#a{
	width:100%;
	height: 100px;
	position: fixed;
	top: 0;
	left:0;
	background: red
}
#b{
	width: 100%;
	overflow: hidden;
	height: 200px;
}
#b div{
	height: 200px;
	width: 1000px;
	background: blue;
}


サンプル

そうして、Androidで縦向き(portlate)で見た後に、横向き(landscape)で見て、更に縦向きに戻すと、fixedしているA要素の位置が右の方向にずれて表示されます。

対応策としましては、viewportにuser-scalable=noを追加します

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

サンプル

リキッドのカルーセルギャラリーとposition: fixedを併用するとカジュアルに踏みそうなバグですね。

以上、現場からお送りしました。それでは、よいAndroidライフをお送りください。

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
Android4.0とiframe
@keyframesとAndroid
Androidとtransformとinputのバグ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS

スポンサードリンク

«電子書籍発売! Web制作の現場で使うjQueryデザイン入門[改訂新版] | メイン | ロクナナワークショップ 10th Anniversary»