固定していない背景画像がスクロール後に乱れて表示される

症状

html要素またはbody要素で固定していない背景画像（background-attachment: scroll;）を表示したページをスクロールすると、スクロールによって現れる部分の背景画像が乱れて表示される。また、スクロールしなければ見えない位置に背景画像がある場合はスクロールしても背景画像が現れない。

例示

<style type="text/css">
body {
  background-image: url('/img/cssbug/opera/img01.png');
  background-position: left center;
  background-repeat: repeat-y;
  background-attachment: scroll;
  padding-left: 48px;
}
</style>

ページ左端に背景画像を表示しています。このページをスクロールしてみてください。

スクリーンショット

N7N7.02での表示（標準モード）

Op7Opera7.10での表示（標準モード）

補足

  • background-positionプロパティの値を調節して背景画像の初期位置を上端に近づけると表示の乱れを抑えることができます。逆に初期位置を下端に近づけると表示の乱れがひどくなります。
  • html要素、body要素以外の要素（div要素など）では背景画像の初期位置に関わらずこのバグは発生しません。

修正状況

  • Opera7.01標準モード、Opera7.10互換モードで不具合の発生が確認されました。
  • Opera6.06でこの不具合は発生しません。

関連記事

スポンサーリンク

% 演算子

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る