iPhone11の時だけbackground-imageが効かない条件がある??

今回も実際に発生した事象について、備忘録もかねて掲載させて頂きます。同じような事象に遭遇している方の参考になればと思います。

Webサイト制作で意識すべき事。

レスポンシブルデザインでWebサイトを制作するにあたっては、当然の事ながら実デバイスとなるスマホ、タブレット、PC。それから、SafariやGoogle Chrome、Windows Edgeといった各種ブラウザを、意識して制作する必要があります。

ただ、一方で、この世の中に存在する全てのデバイスや、ブラウザを使って実機検証する事は不可能なため、実際には、代表的なデバイスによる実機検証と、Google ChromeのDeveloper Toolなどのシミュレーターを使って動作検証するのが一般的な確認方法となります。そのため、Webサイト制作の段階で、ブラウザの動作差分などを意識してコーディングすることは、結構重要だったりします。

特に、弊社で作業をしていて思うのは、Safariで実機確認をすると思った通りの表示になっていないという事に稀に遭遇する事があります。Webサイト制作は、Google ChromeのDeveloper Toolを駆使するため、当然の事ながら、Safariについては、後から実機での確認となるのですが、その試験の中で稀に異常が見つかります。但し、これはブラウザの仕様の違いなどから発生しているので仕方が無いところがあります。

なお、仕様の違いを確認するには、以下の「CanIuse」で調べる事ができます。

発生した事象について

今回、Safariでの動作確認中に発見した仕様差分の事象は、Safari自体の仕様差分、そして、なぜかiPhone11以降にだけで確認された事象となります。

①iPhoneXで動作確認をした結果、仕様差分を発見し対処。問題が修正された事を確認。

②さらにiPhone11で動作確認をした結果、さらに仕様差分を発見。なぜ、iPhone11でだけ本事象が発生するのか原因は不明でしたが、別のやり方を実装する事で対処しました。

iPhoneXで動作確認をした結果、仕様差分を発見し対処した内容

スマホで表示した際のナビゲーションメニュー(※)に、background-imageを使い以下の処理を実装しました。(Chrome/Edgeは問題なし。)

※ナビゲーションメニュー

ハンバーガーメニューとも呼ばれるスマホやタブレットの掲載内容のメニューを知らせるためのボタン。

例)以下の赤い〇の部分

CSSの変数宣言(:root疑似クラス)

:root{

–open-nav-img: url(‘./img/nav-open.png’);

–close-nav-img: url(‘./img/nav-close.png’);

}

:rootの疑似クラスは、IEでは使えませんが、今後IEはなくなるため効率化も兼ねて使用しています。

–open-nav-imgは、ナビゲーションメニューをオープンした時の画像

–close-nav-imgは、ナビゲーションメニューをクローズした時の画像

CSS呼び出し位置

.close-nav-btn{

background-image:var(–close-nav-img);

background-repeat: no-repeat;

background-size:cover;

background-position:center center;

}

.open-nav-btn{

background-image:var(–open-nav-img);

background-repeat: no-repeat;

background-size:cover;

background-position:center center;

}

ナビゲーションメニューがクローズ状態(デフォルト状態)のときには、close-nav-btnクラスを使用し、ナビゲーションメニューの中に、–open-nav-imgの画像を表示。

クリックされた時には、掲載メニューを開くのと同時に、Javascriptで、open-nav-btnクラスを追加する事で、ナビゲーションメニューの中に、–close-nav-imgの画像を表示

上記実装によりナビゲーションメニューの中の画像を切り替えていました。

ChromeとEdgeは問題なく切り替わっていたのですが、Safariでは、画像自体がそもそも表示されず。確認するとどうやら、:rootの疑似クラスを使用したbackground-imageの指定が対応していないようでした。(最新版では対応している可能性があります。)

そのため、直接記載して対応しました。

CSS呼び出し位置(対応内容)

.close-nav-btn{

background-image: url(‘./img/nav-close.png’);

background-repeat: no-repeat;

background-size:cover;

background-position:center center;

}

.open-nav-btn{

background-image: url(‘./img/nav-open.png’);

background-repeat: no-repeat;

background-size:cover;

background-position:center center;

}

:rootの疑似クラスの変数を使わず直接指定

さらにiPhone11で動作確認をした結果、さらに仕様差分を発見。

しかし、iPhoneXまでは本内容で問題がなかったのですが、なぜかiPhone11でだけこの方法で対処しても、background-imageの画像が表示されませんでした。

調べたのですが、原因がわからず最終的には、表現したかった文字をHTMLで記載し、CSS編集する事で対応ができました。

HTML呼び出し位置

<div id=”nav-manu” class=”close-nav-btn”>MENU</div>

※説明のため簡易的に掲載しています。

CSS呼び出し位置

.close-nav-btn{

border-color:var(–mb-nv-menu-color);

background:#fff;

}

.open-nav-btn{

background:var(–mb-nv-menu-color);

}

.nav-words{

color:var(–mb-nv-menu-color);

text-align:center;

font-size:13px;

font-weight:bold;

letter-spacing: -2px;

}

close-nav-btnクラスで、ナビゲーションメニューがクローズ状態(デフォルト状態)でのborder(枠線)とbackground(背景)の色を指定。

open-nav-btnクラスで、ナビゲーションメニューがオープン状態でのbackground(背景)を指定。

加えて、ナビゲーションメニューがオープン状態の時の、HTML文の文言のfontのstyleを記載。

ナビゲーションメニューがクリックされた際には、open-nav-btnとnav-wordsクラスを追加することで切り替えています。

これにより問題が解消できました。後から判明した事なのですが、pngではなくsvgにすると問題が解消される事もわかりました。う~ん不思議です。

なぜ、iPhone11以降だけ、本事象が発生したのかの原因は分からずじまいでしたが、まずはワークアラウンド的に本対処で解決できました。

:root疑似クラスで宣言した変数を使って、background-imageを使うときには、注意が必要かもしれませんね。

 

前の記事

Goolge無料リスティングについて