html 要素と body 要素の background プロパティ

Opera で重いよ ?

今水面下で Movable Type のテンプレート改造および新スタイルシートの作成にとりかかっており、一部の方にプレビュー版を見せてカスタマレビュー ( 大げさ ) をいただいています。 私は Mozilla Firefox をメインターゲットにして CSS を作成しているため、手持ちの Firefox 1.0 で問題なく表示できれば大丈夫だろう、と考えていました。

ところが、レビューをしていただたいていた方の内のお一人から、「表示が激しく重い」といった指摘を受けたため、こうして作成途中のスタイルを表に出してみることにしたわけです。 その方はレビューをしていただいていた方の中で、唯一 Opera を常用していた方なので、マシンスペックや通信速度、背景に使っている画像のサイズなどよりも、ブラウザのレンダリングによるものではないかと思い自らも Opera 7.53 を起動して確認してみたところ、表示しただけで CPU 使用率が 100% になりました。

実際に新スタイルを適用してみたページ

• CSS のサンプル

初期の段階で躓いてしまったので、完成型ではありません。 解決したので公開を停止しました。

原因と思われる CSS の記述

html{
  color:         #ffffff;
  background:    #000000 url("../materials/20041114.png") left top repeat-y;
  }

body{
  color:         #ffffff;
  background:    #000000 url("../materials/_sample.jpg") right top repeat-y;
  }

html 要素と body 要素の両方に background プロパティで repeat-y を指定していると、 Windows XP Home Edition 、 Opera 7.53 の環境で CPU 使用率が 100% になりました。 html 要素か body 要素のどちらか、あるいは両方ともをコメントアウトすると再現しませんでした。

Opera CSSバグリストを見ても該当するものはありませんでしたので、まだ解決方法が見つかっていません。 コメントアウトすることなく、上記の指定を残したまま Opera でもスムーズに閲覧できる解決方法はないものでしょうか……。 結局、 html 要素に背景を指定するのをあきらめて、他の部分にうまく指定することで解決しました。