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を使うときには、注意が必要かもしれませんね。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
