ソースを修正しないでモーダルウィンドウ系プラグインの IE6 のガタつきを抑止してみる

jQuery BlockUI のようなモーダルウィンドウ系プラグインの中には、画面スクロールしてもウィンドウ表示位置が固定されるものがありますが、IE6 の場合 position:fixed が使えない関係でスクロール時、固定ウィンドウがガタついて表示されてしまう事が多いようです。

私の場合、会社の昼休みに IE6 でプラグインのデモページをチェックすることが多いので結構気になることがあります。（最近は IE6 だとまともに動作しないプラグインも結構多いです）

「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」では、expression と background-image / background-attachment の設定でガタつきを抑止することができました。
同様の手法でプラグイン自体のソースを変更することなくガタつきを解消することができないか試してみました。

ガタつき防止処置をプラグイン化してみる

固定位置表示の実装をみると IE6 以外では position:fixed で固定表示し、IE6では setExpression でスクロールに合わせた表示位置を調整する方式を採用してるプラグインが多いようです。
そのような場合は以下のよう background-image と background-attachment の設定さえ行えばガタつきを解消することができます。

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

上記例では、対象要素を html としてますが、後方互換モードの場合は body に対して行います。
また、background-attachment に対し fixed とするので IE6 の場合のみ背景画像が固定表示される懸念がありますが、標準モードの場合については画像の割当先を body に移すことで回避することができます。

汎用性を考慮し下記のようなプラグインを定義してみます。

(function($j){
	$j.exFixedPatch = function(){
		//IE 以外、IE7 以上で標準モードならなにもしない
		if(!$j.browser.msie || ($j.browser.version > 6.0 && $j.boxModel))return;

		//標準モードなら html 、互換モードなら body をコンテナとする
		container=$j.boxModel?$j('html'):$j('body');

		var img=container.css('background-image');
		//背景画像なし時は null をセット
		if(img=='none'){
			container.css({'background-image':'url(null)'})
		}
		else
		//標準モードなら html の属性を body にコピーする
		if($j.boxModel){
			container.css({'background-image':'url(null)'})
			$j('body').css({
				'background-image':img,
				'background-attachment':container.css('background-attachment')
			})
		}
		//background-attachment を fixed にする
		container.css({
			'background-attachment':'fixed'
		});
	};
})(jQuery);

下記のように実行します。

jQuery(function($){
    $.exFixedPatch();
});

いくつかのプラグインで試してみる

IE6 でガタつきが見受けられたプラグインで実際に試して見ました。
下記サンプルページは IE6 でご覧ください。

いずれも適用後のサンプルページを見ると、スクロール時のガタつきが解消されてることが確認できます。
IE6 ベースな環境（イントラとか）で上記のようなプラグインを使用される場合に使ってみてはいかがでしょうか。

ガタつき防止処置をプラグイン化してみる

いくつかのプラグインで試してみる

jQuery BlockUI

jGrowl

SimpleModal

jQuery SuperBox