管理画面の幅よりブラウザの表示領域が狭い場合に div#header の背景が一部描画されない

[snitta]

フォーラムより webtamago 様のご報告です。

 http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=14682&forum=13

フロント画面の不具合？ 初めて投稿させていただきます。 書き方に問題がありましたらお手数ですが、ご指摘いただければ幸いです。

現在ロックオン社様のDEMOのフロントページでも確認できるのですが、 ウィンドウサイズを小さくしていくと、横へのスライダーが出てきます。 そのスライダーをスクロールしてみると、ヘッダー部分に謎の空白ができています。 同様の現象が今作成中のサイトにも表れています。

FIREBUDで見てみたのですが、何が原因かわからず困っています。

何か原因がわかる方いましたらお手数ですがご教授いただけますでしょうか。

[snitta]

フォーラムに返信した内容の転載です。検討材料にご利用下さい。  http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=14682&post_id=66547&order=0&viewmode=flat&pid=66493&forum=13#forumpost66547

この現象ですが、まず関連する要素の幅は下記のように指定してあります。

要素: html > body > div#header > div#header-contents
  幅: auto > 100% >       100% >              1030px

これを CSS 2.1 の仕様に従って解釈すると、html, body, div#header の幅が表示領域のそれになるそうです。例えば表示領域が 500px ならこうなります。

要素:  html >  body > div#header > div#header-contents
  幅: 500px > 500px >      500px >              1030px

その為 div#header の背景画像が 530px 分描画されません。逆に言えば body の幅を表示領域に依存させなければ解消するはずです。

/* 内容にフィットした幅を求めさせる */
body {
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content; /* IEはまだサポートしていません */
}

/* あるいは、置換インライン要素と同じ手順で幅を求めさせる */
body {
    width: auto;
    display: table;
}

/* あるいは、手抜き1 */
body { width: 1030px; }

/* あるいは、手抜き2 */
#header { width: 1040px; }