Page Top

Firefox 画面が縦に長すぎると背景画像が切れる

August 22, 2014

今、ウェブページを利用してサイトの部分表示を行うエリアのテキストや画像の表示チェックをしているのですが、テストとして長~~~いコンテンツを入れてみたところ、Firefoxでだけで何故か背景画像(パターン指定)が切れます。その他のモダンブラウザや、ましてやIE6でも大丈夫ですのに、Firefoxでだけでこのようなバグが生じています。しかもFirefoxは最新版の分です。

調べた所、BLUE COMPLETE様の記事で「【Firefox】縦長のページで背景画像が切れてしまう件」を読ませていただき、どうやら要素の長さが32,000px以上になると背景画像が切れてしまうことがわかりました(32,000pxというのが微妙な数字です。)

その対処法としてJQueryを使用して要素の高さを取得し、その高さをJQueryでcss指定すれば良いはず?という風に書かれていましたので、確かめてみようと思い、色々JQueryで似たような動作のものを探してチャレンジしていましたが、ボックスは長くなっても背景画像はやはり切れたままで、もしかしてJQueryのcssが効いてないのではなくて、cssファイル自体の背景画像パターンボックスにheightを40000pxなど指定をしても、もしかすると駄目なのかも?と思い、ダイレクトにcssファイルの該当箇所にheight: 40000px;などと入れてみましたところ、背景画像はやはり切れていました。

ということで、現実的に、32000px以上の長さのコンテンツを1つの要素に入れるのは普通あまり無い事なので、これまで通りにしておきたいと思います。。

ちなみに、JQueryで似たような動作をするお手本として、Web Design Leavesさまの「jQuery を使って要素の高さを揃える」という記事がとても参考になりました。ありがとうございました。

最新記事