Firefox 4 以降で特定のサイトで文字がにじむ原因

  • CSS
  • 現在地

なお、この現象がこの原因で起きている場合はサイト側で対処するしかないと思われます。(ブラウザの設定でどうにかできるかは分からないので。)

前から気づいていたのですが、このサイトを Firefox 4(5 も含む)で閲覧すると、ページの描画後から数秒ほどで、文字がにじむ(ぼやける?)現象が今まで起きていました。(3.6 の頃には起きていなかった現象。)

この現象は、文字色が黒の場合あまり気付くことはないのですが、黒背景で文字色が白だと、わかりやすく文字にギザギザのジャギーができており、非常に読みにくくなってしまいます。

なぜ、こんなことが起きるのかとググってみたんですが、対策については見つかりませんでした。

他のブラウザでは起きない、かつ、文字がにじんでしまっているサイトもごく少数しか確認できませんでしたので。

で、諦めかけていたんですが、つい先日 Firebug でいじっていたら急に直ったので、ここに対処法を記しておくことにしました。

この現象が起きる原因

どうやら、CSSのボックスの重なりを設定する z-index でのミスが原因でこの現象が起きてしまっていたようです。

私の場合のミスは z-index: 2; が設定されたボックスの中に、同順位のボックスを置いていたことによる競合が原因のようで、中のボックスの z-index を外すことにより解決しました。

前は重なる位置になかった別々のボックスだったのですが、配置を変えた時に z-index の設定を外すのを忘れていました。

後書き

ということで、もし Firefox 4 以降のバージョンで特定のサイトでのみ文字がにじむという現象が起きた場合は、一度 z-index を疑ってみて下さい。

それにしても、ミスがあった部分はコンテンツ部分ではないのにその部分の文字もにじんでいたということは、この現象は z-index のミスが一つでもあると、他の z-index を設定した(ミスがある部分とは重ならない)部分にも起きるようです。

おかげで、どこに問題があるのか原因がわかりづらくなっていました。

スポンサードリンク

inserted by FC2 system