スマホのposition: fixed;で再描画を使って位置ズレを防ぐ

スマホでposition: fixed;を使うと、よくページ進む・戻るボタンで画面遷移をしたときにfixedを指定した要素の位置がズレたりタップ位置がずれたりする。

そういう場合に、以下のような方法で再描画をさせることで位置ズレを解消してあげることができる

//// JavaScript (ここでの$はjQueryみたいなもの)
var html = $("html");

// pageshowのイベントでhtmlに.do-fixedを付ける
window.addEventListener("pageshow", function() {
    html.addClass("do-fixed");
}, false);

// pagehideのイベントでhtmlから.do-fixedを外す
window.addEventListener("pagehide", function() {
    html.removeClass("do-fixed");
}, false);

/* 初期はabsoluteな要素にしておく */
.fixed-element {
    position: absolute;
}
/* .do-fixedが付いたときだけfixedを適用する */
.do-fixed .fixed-element {
    position: fixed;
}

pageshow, pagehideは、ページ進む・戻るの場合いずれも呼ばれるので、遷移の際には

absolute(初期) -> fixed(pageshow) -> absolute(pagehide) -> 繰り返し

のように意図的に再描画させてあげることでズレを防ぐことができる。

もちろん再描画してる分だけレンダリングのコストはかかってしまうので、できるだけ少ないのがベストなんだけど、こういった使い方で回避することもできるということで。