これはiPadでの出来事なのですが、iOS 5.xとiOS 7.xでは再現しないけどiOS 6.xで起こるposition:fixedの変な挙動の話です。
「Naverまとめ」や「Facebook」のようにある一定までスクロールすると上部から要素がニュッとスライドダウンのような挙動で表示されるようなヘッダーのようなものを実装しました。
今回のはスクロールではなくて、ボタンをクリックしたときに、上部から要素がニュッとスライドダウンのような挙動で表示され、一定時間経つと非表示（正確に言うとスライドアップの挙動で画面外にさせる）にするようにしました。
デフォルトでは表示されませんので、下記のようなスタイルを指定していました。上部に表示される要素は高さが100px未満なので、「-100px;」と指定をしていました。クリックされたときに「top: -100px;」を「top: 0px;」にするのをjQueryで実装。
CSS
#fixed-header {
position: fixed;
z-index: 100;
top: -100px;
}
jQuery
$('button').click(function(){
$('#fixed-header').stop(true,true).animate({top: '0px'}, 100);
});
var timer;
window.clearTimeout(timer);
timer = window.setTimeout(function(){
$('#fixed-header').stop(true, true).animate({top: '-100px'}, 100);
}, 3000);
ひとまずはこれで問題なく実装が完了したのでしたが、担当の方から「下から上へスクロールしたときにfixed-headerが表示される」という報告を受けました。
「まじか！」と思いながら、急いでiOS 5.xのiPadで確認したところ再現せず、iOS 7.xのiPadでも再現しませんでした。そして、家にあるiOS 6.xのiPadで下から上へスクロールする度に一瞬表示され、すぐに消えるようなものでした。対処として画面外にある場合はdisplay:none;とかで非表示にする方法もあるのですが、ひとまず下記の対応で解消しているようなのでした。画面外にある距離がでかくなれば大丈夫だろうという単純な発想ですが、-100から-1000に変更。
CSS
#fixed-header {
/* 省略 */
top: -1000px;
}
jQuery
/* 省略 */
$('#fixed-header').stop(true,true).animate({top: '0px'}, 100);
/* 省略 */
$('#fixed-header').stop(true, true).animate({top: '-1000px'}, 100);
冒頭でも書きましたが、iOS 5.xとiOS 7.xでは再現しないけどiOS 6.xで再現したという話でiOSでのposition:fixedのバグか何かだと思いますが、position:fixedには度々悩まされますね、やれやれ。
コメント