IE6 でガタつかない positoin:fixed をさせるための詳細条件を調べてみた

jQuery JavaScript CSS


「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。

exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただいたバグを解消する際に、ガタつき防止の前提条件をいろいろと調べたので忘れないようメモしときます。

固定位置に表示させる処理


まず固定位置表示処理のおさらいから。
IE 固有機能の expression を使います。expression は CSS 定義内でも記述することができますが、JavaScript 内で記述する場合は以下のように書きます。コードは jQuery ベースです。

//位置調整ができるように position:absolute にします
var el = $('#fixedElement').css('position','absolute')[0];

//expression でページスクロール量を加算します
el.style.setExpression(
    'top',
    'eval(100+(document.body.scrollTop||document.documentElement.scrollTop))'
);
el.style.setExpression(
    'left',
    'eval(100+(document.body.scrollLeft||document.documentElement.scrollLeft))'
);


Demo (IE6 Only)

例ではブラウザの表示領域左上から (100px,100px) の位置に固定表示されます。
ちなみに IE8 からは expression は廃止されています。なのでクロスブラウザを意識する場合は、IE6、IE7/8 の互換モードの場合のみこれらの処理を適用するようにします。

if($j.browser.msie && ($j.browser.version < 7.0 || !$j.boxModel)){
    IE6 向けの処理
}


位置調整自体は expression を使用しなくても可能ですが、後述するガタつき防止処置を適用するには expression の使用が前提になります。

スクロール時のガタつきを防止する


上記の処理だけだとスクロール時に対象要素がガタついて表示されます。これを防ぐために以下の処理を追加します。

$('html').css({
    'background-image':'url(null)',
    'background-attachment':'fixed'
});


Demo (IE6 Only)

これでガタつかない position:fixed が実現できます。
html 要素に背景画像が割当てられてる場合は　'background-image':'url(null)' は不要です。ただ、'background-attachment':'fixed' のせいで背景画像も固定表示されてしまうので、これを避けるためには body 要素に背景画像を割り当てる等の工夫が必要です。

上記の例は、標準モードで試したのですが、サンプルの HTML の場合だと 'background-attachment':'fixed' の記述がなくてもガタつかない position:fixed が実現できます。また、background 関連の設定をする要素を body にしてもうまくいきます。（但しこの場合は'background-attachment':'fixed'は省略できない。）
調べたところ html , body 要素の background-color , background-image の設定の有無、標準/互換モードの条件の組み合わせによって、'background-attachment':'fixed' が必須か否かが決まるようです。

ガタつき防止 fixed 条件の組み合わせ


標準、互換の両モードでガタつかない組み合わせ条件を調べてみました。

'background-attachment':'fixed'の記述あり


'background-attachment':'fixed'の記述なし


意外だったのは、

  • 互換モードの場合、'background-attachment':'fixed' を省略しなければ background 設定の対象要素が html 、 body のどちらでもＯＫだったこと
  • 標準モードの場合、html 要素の background-color と background-image が設定されてなければ 'background-attachment':'fixed' が省略できること
  • 標準モードの場合、background の設定対象要素を body にしても html 要素の background-color と background-image が設定されてなければＯＫだったこと

です。

exFixed などの汎用ライブラリに頼らずにガタつかない position:fixed をさせたい場合は上記の表が参考になるかと思います。

exFixed の処理仕様の変更


今回の調査で exFixed の処理仕様を変更する必要がでてきました。標準/互換モードに関わらず html 要素に対し下記 background の設定を行うようにします。

  • background-image が未設定の場合、background-image:url(null) を設定する
  • background-attachment:fixed を設定する


なので 背景画像を固定表示させたくない場合は body 要素に背景画像を設定するようにしてください。また、互換モードの場合は、body 要素に背景画像を設定しても固定表示されてしまうので、これを避けるためには標準モードを使用するようにしてください。

ちなみに長ったらしい DOCTYPE 宣言を記述しなくても、下記のような HTML5 ベースな記述で標準モードにすることができます。

DOCTYPE 宣言は <!DOCTYPE html> となります。HTML 構文では、大文字と小文字を区別しません。以前の HTML は SGML であり、DTD を参照する必要があったため DOCTYPE は長くなっていました。しかし、HTML 5 では異なり、DOCTYPE は HTML 構文において標準モードを有効にする手段としてのみ必要となっています。なお、ブラウザーは現段階において既に、<!DOCTYPE html>: を標準モードのトリガーとして解釈しています。

http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff

最新の jQuery.exFixed.js

こちらからどうぞ。

Demo