Firefoxでposition:fixedの重複+backgroundの組み合わせに注意!


Firefoxでposition:fixedの重複+backgroundの組み合わせに注意!

どうも、レーウィンです。今回はFirefoxの仕様についてです。多分、バグ?なのかな?うーん。。

現象が起こる条件について

html {
	position: fixed;
	width: 100%;
	height: 100%;
}
body {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}

この時、「Google chrome」「IE9」「iPhone safari」では問題なく表示されましたが、「Firefox」では背景が表示されません。
(IE10、IE Edge、Android系はまだ試してません。コメントで情報くださると助かります)

ちなみに、

html {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}
body {
	position: fixed;
	width: 100%;
	height: 100%;
}

これでも表示されません。なんてこった。

表示される書き方

htmlもしくはbodyにfixedを指定する前提でパターンを出します。

①両方にbackgroundを指定する

html {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}
body {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}

はい、backgroundを両方に設置する方法です。これだとなぜか表示されます。ほんとなんでだろ・・・。

②htmlのfixedをやめてbodyにbackgroundを指定する

html {
	width: 100%;
	height: 100%;
}
body {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}

これでも表示されます。

③htmlのfixedをやめてhtmlにbackgroundを指定する

html {
	width: 100%;
	height: 100%;
	background: url("../img/main-bg01.jpg") no-repeat center center /cover;
}
body {
	position: fixed;
	width: 100%;
	height: 100%;
}

②と似たような感じですが、これも表示されます。

・bodyのfixedをやめてhtmlにbackgroundを指定する
・bodyのfixedをやめてbodyにbackgroundを指定する

こちらは両方とも表示されませんでした。

なので結論からすると、
html、body共にposition: fixedを指定する場合
→両方ともに背景を指定する。
html、body片方にposition: fixedを指定する場合
→htmlにfixedを指定する。背景はhtmlでもbodyでも可。
となります。

原因について

よくわからないです。最初はfixedの中にfixed入れると不具合起きやすくなるいつものパターンかなと思ってましたけど、両方に指定すると正常に動くというのが謎です。両方に指定した時に表示される方か、片方だけにした時表示される方、どちらかがおそらくバグだと思います。
もしわかる人いたらコメントください(他力本願)

フルスクリーンでのサイトを作る場合は注意してみてください!では!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。