各ブラウザ間の表示差分のご紹介「Safari」

また、久しぶりにブログを掲載させて頂きます。今回は、ブラウザ間の表示の差分についてです。

Webサイト制作を実施していくと、ブラウザのHTMLやCSSの仕様の解釈の違いや不具合等で表示が異なっていたりすることがたまにあります。

特に、Google ChromeのDebug機能は非常に便利なので、Google Chromeをベースとして開発と動作検証を進めていくと、ChromeのiPhoneの動作をシミュレートする機能で動作検証する形になります。

当然、その後、iPhoneなどの実機で、Safariのブラウザを使って評価試験をしていくわけですが、仕様が異なり表示が異なっていたりするわけです。

このSafariでの実機評価を怠ると、お客様の方から、PCとスマホで見え方が異なっているとご指摘を受けてしまいます。

Google ChromeとMicrosoft Edgeは同じ表示なのに、Safariのブラウザで見た場合だけ、表示が異なるという事が結構あります(ネット情報を見ても結構出てきますね。)

この辺りは、仕様の解釈の違いなどもあるので、ブラウザの良し悪しはさておき、現場としては表示を合わせなければなりません。

今回は、弊社で確認した差分について、いくつか紹介したいと思います。

1.「display:inline-flex」使用時の注意

inline-flexは、幅を指定しなくても勝手に中身依存の幅になることができるinline-blockの性格とflexの性格を持った万能な要素です。div要素で使い、その子供にimgタグを使いちょっとしたアニメーション(画像の拡大)で使っていたところ以下の事象に遭遇しました。

事象の発生するHTML文

事象の発生するCSS文

.scale{ display:inline-flex; overflow:hidden; } .scale img:hover{ transform:scale(1.1); transition-duration:0.5s; }

本内容は、子要素のimgタグに指定されている画像の大きさに合わせて表示を行い、マウスカーソルがその上をhover(その上に乗ったら)したら、0.5秒の速度で1.1倍で画像を拡大表示するという文です。

遭遇した事象

Google Chrome、Microsoft Edgeでの表示や、動作に問題はございませんでしたが、Safariで確認すると、上記形式でinline-flexを使用すると、画像が、かなり縦に間延びするという事象が発生します。

修正方法

以下のCSS文のように、display:inline-flexの指定に合わせて、justify-content、align-itemsを使い、子要素の表示方法を指定すると改善します。

事象の発生するCSS文

.scale{ display:inline-flex; overflow:hidden; justify-content:center; align-items:center; } .scale img:hover{ transform:scale(1.1); transition-duration:0.5s; }

2.電話番号/FAX番号/電話番号っぽい数字の羅列に<a>タグが入る

電話番号やFAX番号、電話番号っぽい数字の羅列(例えば住所の番地記載等)に、色を指定していないのにSafariの時にだけ色が勝手に変わっていたならば、本件が原因です。

Safariのブラウザでは、電話番号っぽい数字の羅列を見つけると、勝手にaタグを入れて、電話番号をリンク先にする機能があります(スマートフォンから電話を掛けられるようにする機能)。

例

上記を記載するとSafariは電話番号と認識し、aタグを自動挿入します。なお、Google Chromeや、Microsoft Edgeでは何もしません。

そのため、羅列された番号の要素がaタグ内に変わるため、記載しているCSSの内容によっては色などが変わってしまうわけです。

修正方法

あらかじめaタグが挿入される事を前提に、以下のように影響を与えないようなCSS文を追加しておきましょう。事前に本処理を入れておくことで色が変わらないように設定する事ができます。

.faxno a{ color:(色を指定) text-decoration:none; }

3.テキストのグラデーションが機能しない。

親要素にグラデーションを指定したが子要素へ引き継がれず、Safariの時だけテキストのグラデーションが利用できず、何も表示されない。

例

HTML文

<h2 class=”title”> <p> <span class=”linectl”>グラデーション文字</span> </p> </h2></span

CSS文

.title p{ background:linear-gradient(to right, #cc9726, #8a5c01,#c4b491); -webkit-background-clip: text; background-clip: text; color:transparent; } .linectl{ display:block; text-align:left; }

修正方法

この場合は、テキストグラデーションを子要素に指定して頂ければ解決致します。

.title p{ } .linectl{ display:block; text-align:left; background:linear-gradient(to right, #cc9726, #8a5c01,#c4b491); -webkit-background-clip: text; background-clip: text; color:transparent; }

弊社で確認したブラウザでの表示の違いと、その対処方法について掲載させて頂きました。何かのお役に立ててれば幸いでございます。