色んな場面で使えそうなnyroModalですが、Firefoxの場合、オブジェクトを全て読み込んでいない状態だと動作が尋常でないほど重くなるという問題がありました。
nyroModalは、コンテンツの上部に半透明色で塗りつぶしたオブジェクトを書き出して表示しているわけですが、
この透過処理がFirefoxの場合、極端にパフォーマンスを悪化させています。
対処法としましては、とりあえず1422行目あたりにある、透過処理の関数を弄ってFirefoxの場合のみ半透明ではなく
塗りつぶす、もしくは
塗りつぶさないという具合に分岐させる方法が一番手っ取り早いです。
たとえばこんな感じですね。
function showBackground(elts, settings, callback) {
var ua = navigator.userAgent;
ua = ua.toUpperCase();
if ( ua.indexOf('FIREFOX') > -1){
elts.bg.css({opacity:0}).fadeTo(500, 0, callback);
}else{
elts.bg.css({opacity:0}).fadeTo(500, 0.75, callback);
}
}
とりあえず、これで表示速度の問題は解消できます。
しかし、解消できるとはいっても、これではコンテンツの上にそのままオブジェクトが表示されるので、場合によっては非常に見づらい可能性があります。
この問題を解決するためには、すっかりおなじみとなりましたCSSハックを使います。
生成されるオブジェクトの親要素は div#nyroModalFull なので、この子に対して
Firefoxの場合のみ背景画像として透過PNGを設定するようにします。
div#nyroModalFull {
background-image:none;
}
div#nyroModalFull, x:-moz-any-link { background-image:url(画像のURL); }
html*div#nyroModalFull {background-image:none;}
div#nyroModalFull, x:-moz-any-linkだけだと、IE7の場合にも適用されてしまったので、
CSSハックの中でも最もよく使われているであろうスターハックでIE6と7に対し背景画像を無しに設定しています。
※6は大丈夫ですが、スターハックを使うと6と7両方に掛かります。
もし、6と7で更に分岐させる場合は、プロパティの頭に _ を付けてあげると幸せになれます。
ex：
_width:100px;/*IE6のみwidthを100pxに設定*/
今更感が強いですが、そんな感じです(´・ω・｀)
ちなみにスターハック以外にも、
プロパティの前に【/】をつける。ことでIE6、7に適用することが出来るそうです。
記述が楽なので今度からこれも試してみます(*´ω｀)
参考サイト：
CSSハック一覧：HTML│CSSタグ辞書
