1. 【Android4.0】position:fixedしたときに1pxのスキマが出来てしまう問題

【Android4.0】position:fixedしたときに1pxのスキマが出来てしまう問題

by topgold

position:fixedしたときに1pxのスキマが出来てしまう

 Android4.0で「position:fixed」を使って要素を画面の一番上に固定した場合、謎な1pxのスキマができてしまいます。ページを表示したタイミングでは問題ないのですが、スクロールしていくとその下にある要素がチラチラと1px分表示されてしまいます。

固定ヘッダ部分のCSS


#fixedHeader{
position: fixed;top:0px;left:0px;z-index:10;
background:blue;color: #FFF;text-align: center;
width: 100%;height: 50px;line-height: 50px;

対応策は無いかも…

 「1pxずれるのであれば、margin-top:-1pxとかで1px上にあげちゃえばいいじゃん!」と思ってやったのですが撃沈。その他思いつく限りのことをためしてみたけどずれたままで効果はありませんでした。

 この問題については、海外のコミュニティでも議論されていましたが、解決には至っていないようです。

 スクロール時にも1pxチラついたり、チラつかない瞬間もあったりするのでバグっぽい感じではありますね。残念ながら対応策が無さそうです。

代替手段は「iScroll」を使う

 「position:fixed」を使うのではなく「iScroll」というJavascriptのライブラリを使えばこの事象は発生しません。スマホブラウザがまだposition:fixedに対応していなかった時代からある老舗ライブラリです。現在の最新バージョンは5。

 このライブラリを実装する場合は下記のようなHTML構造にする必要があります。

HTML


<body onload="loaded()">
<div id="header">★固定ヘッダー★</div>
<div id="wrapper">
<div id="scroller">
★スクロールさせたい要素★
</div>
</div>
</body>

Javascript


var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', { mouseWheel: true });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);


 わざわざライブラリ使うのは手間だと感じるかもしれませんが、Android4.0以外では「position:fixed」はほぼ正常動作します。iOS4はposition:fixedには対応していませんがほぼシェアが無いので考慮しなくて良いのではないでしょうか。


 以上、Android4.0でposition:fixedしたときに1pxのスキマが出来てしまう問題についてでした。

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する