manmanrai’s diary

勉強記録ブログ

【スマホ版】フル画面で背景fixed URLバーが消えることによってサイトの画面の高さが変わる問題について

問題

スマホでウェブサイトを閲覧する際に、スクロールするとURLを表示してる部分が一時的に上に隠れてしまうことよって、ブラウザの高さが約60px前後増えます。
フル画面でbackgroundをfixedに指定すると、画面の大きさに適応するための一瞬バグらしい白いブロックが表示されます※。

※bodyの背景色が表示されます。特に指定しなかった場合は白です。

解決

厳密に言えば、現段階では解決できませんが、違和感を緩和できる方法をstack overflowで見つけました。
Vincentさんに感謝です。

stackoverflow.com

どう緩和出来たかと言いますと、バグらしい白いブロックは出ずに一瞬で対応されます。
じっと背景を見つめると画像だと拡大されたことには気づきますが、それでもだいぶ改善されたと思います。

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

またこの問題に出会うかもしれませんので、記録として残します。