スマホでリロードしたときに、背景画像が表示されなくなる現象を確認しました。

今日は業務中に起こったCSSで困ったことについて記録していきます。前提として、この現象の原因はわかっていないため、解決方法をお伝えすることはできませんが、この記事を公開することでどこかの誰かが原因や解決方法を見つけてくれることを願って、記事を残します。

スマホでリロードしたときに、背景画像が表示されない？？

タイトルにもある通り、Webサイトをスマートフォンで見たときに、最初にページを読み込んだときには表示されていた background-image で表示している画像が、リロードしたり、同じドメイン内の別ページにページ遷移をしたときに表示されなくなる問題が起こりました。 具体的なソースコードとしてはどうなっているかといいますと、下記のようなSCSSでスタイルを定義していました。

td.is-success a {
　color: blue:
　background: center / contain no-repeat url("画像のパス");
}

このように table タグ内の tdタグに is-success クラスがついたときに td タグ内の a タグに backgroundプロパティで背景画像を設定していました。 is-success クラスは JavaScript で特定の条件のときにクラスがtdタグに振られるようになっています。 この条件下で、リロードするとbackground プロパティで指定した背景画像が消えてしまいました。文字色のスタイルはきちんと適用されていたため、JavaScript が原因で is-success クラス がついてないだったり、CSSが適用されていないといったことが原因になっているようではなさそうです。

この原因がわからず、会社の先輩に相談すると、Stack Overflowのとあるリンクを紹介されました。そのリンクがこちらです。こちらの質問への回答によると、どうやら background-image を background の一括指定プロパティで指定していることが原因のようです。

そのため、先程のコードを以下のように修正してみました。

td.is-success a {
　color: blue:
　background-image: url("画像のパス");
　background-position: center;
　background-size: contain;
　background-repeat: no-repeat;
}

実際にこれで試してみたのですが、スマホで見てみても背景画像が表示されないままでした。safariの検証ツール上のネットワークタブでリクエストが失敗しているのではないかと、iPhoneをライトニングケーブルで繋いで検証してみましたが、リクエストが失敗しているわけではありませんでした。

解決方法

この問題には頭を悩まされたのですが、結局背景画像が背景色でも再現できるような見た目をしていたため、background-color で再現することにして、なんとか解決できました。

まとめ

今回は業務中に起こったCSSのバグ？についての記事でした。今回は原因がわかりませんでしたが、今後この記事はなにか進展があり次第、更新していきたいと思います。なにか原因がわかった方や、自分も同じような現象に遭遇したことがあるという方はぜひTwitterの方に連絡をいただけるとうれしいです。ツイッターのアカウントは@poorman_uiです。