Android標準ブラウザで背景画像がコンテンツの上に乗っているように見える症状に遭遇したら、「background-attachment」が「fixed」になっていないか調べてみてはいかがでしょうか、という記事です。
もしかして有名なバグかなとも思ったのですが、個人的にはまったのでメモです。
先日、随分前に作られたウェブサイト(スマホ対応など何もしていない普通のPCサイト)をAndroid「4.2.2」と「4.1.2」の標準ブラウザで閲覧したときに、画面が真っ白になってしまうという報告を聞いて、調査しました。
真っ白というより、ちょうど背景画像上のコンテンツが透明になってしまっているような感じで、手探りで(!)操作してみると、リンクなどはタップできるということでした。
そのため、最初、文字コードだったり(該当サイトは「Shift_JIS」のサイトでした)、フォントだったりが問題なのだろうかと考えたのですが、そうではなく、最終的にどうもCSSが原因だろうというところまでわかりました。
ちょうどその時は、「Android4.2」や「Android4.1」を誰も持っていなかったため、とりあえず「Android4.0」と「Android4.3」の標準ブラウザで検証したところ、どちらでも特に問題なし。
となると、後はエミュレータを頼りに検証するしかありません(お世話になったエミュレータはこちらです)。
なるほど、エミュレータで見ると、確かに真っ白になっています。
しばらく原因が分からず頭をひねっていたのですが、ふと「fixed」という文字が頭に浮かんだので調べてみると、やはり「background-attachment」プロパティに「fixed」が指定されていました。
これじゃないか、と試しに「fixed」を消してみると、なんと普通に表示されたではありませんか!
実際にCSS上に書かれていたのは下記です。
body { background: url(../images/bg.jpg) no-repeat center top #fff fixed; }
結局、とりあえずこれを外すしかないですね、ということになり、今回は「fixed」を削除し、背景画像をスクロールしても問題ないものに差し替えるかたちで対応しました。
body { background: url(../images/bg.jpg) no-repeat center top #fff; }
ちなみに、正確にデバイスの解像度とか把握できるのであれば、こんな感じでも対応可能かもしれません。
body { background: url(../images/bg.jpg) no-repeat center top #fff; } @media only screen and (min-device-width: 1001px){ body { background-attachment: fixed; } }
というわけで、これだけのことなのですが、Android標準ブラウザで背景画像がコンテンツの上に乗っているように見える症状に遭遇したら、「background-attachment」が「fixed」になっていないか調べてみてはいかがでしょうか、という記事でした。
ご参考になれば。