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入れると不具合起きやすくなるいつものパターンかなと思ってましたけど、両方に指定すると正常に動くというのが謎です。両方に指定した時に表示される方か、片方だけにした時表示される方、どちらかがおそらくバグだと思います。
もしわかる人いたらコメントください(他力本願)
フルスクリーンでのサイトを作る場合は注意してみてください!では!