こんにちは、コーダーのばやしです。

皆様はInternet Explorer（以下IE）のことをどう思いますか？「昔ながらの使いやすいブラウザ」でしょうか？おそらく、コーディングをかじったことのある方で好きな人はあまりいないでしょう。

（IE BIG LOVEな方がいらっしゃいましたら申し訳ありません）

なぜかと言えば、IE特有の仕様やバグといったものが多数存在するためです。

コーディング時に常に意識しなければならないのが、特定のブラウザ限定の特殊な仕様やバグです。

IEならではの仕様やバグに惑わされたことは枚挙に暇がないですが、IE以外の主要ブラウザで直面する仕様やバグも中々厄介なものです。

今回はそのような、Chrome/Safari/Firefoxなどの主要ブラウザで見られるようなバグや仕様を紹介していきます。よろしければブラウザを切り替えながら見比べてみてください。

※以下の内容は必ずしも最新のものではなく、すでにアップデートで修正されている可能性もあるので必ず最新の情報を確認するようお願いします。

※小ネタ：2021年4月のWindowsUpdateでレガシーEdgeがChromiumベースのEdgeに自動で置き換わりました。これでレガシーEdgeでの表示確認はしなくても良くなったという見解です。

1. Safari

言わずと知れたApple社製のウェブブラウザ。PC（Mac）で使用しているユーザーは少数ですが、特に日本においてはiPhoneで使用しているユーザーがとても多いブラウザなので、クロスブラウザ対応においては切っても切れない存在です。

1. border-radiusとoverflow:hiddenによる角丸がアニメーション中だけ外れる

imgタグをaタグで囲んで角丸のボタンにしたい時などにtransitionでホバーアニメーションを付けると、アニメーション中に限って角丸が外れます。

See the Pen
zYKpNxM by たろう (@bayashi)
on CodePen.

対処法

下記のように親要素にposition:relative;とz-index:1;を追加してスタックコンテキストを生成してあげることで解決します。

/* 親要素 */
.parent {
  position: relative;
  width:100px;
  height:100px;
  border-radius:10px;
  overflow:hidden;
  z-index:1;
}
.parent:hover .child {
  transform:scale(1.1);
}
/* 子要素 */
.child {
  transition: transform .3s;
}

または、border-radiusを効かせている要素に下記のプロパティを追加することでも解消するようです。

will-change: transform;

2. z-indexがうまく効かない

子孫関係が複雑な装飾を作っている時に、translate3dを使っているなどの状況下で予期しない前後関係になる場合があります。

See the Pen
abmEBeP by たろう (@bayashi)
on CodePen.

対処法

translate3d(0,0,0);

translate3dやtranslateZなどで変形を加えている要素の親要素に上記プロパティを追記することで解決します。transfromプロパティはよくz-indexに影響を与えるようですので、同様の問題に直面した場合の解決策の1つとして覚えておくと便利です。

4. animation-delayがうまく効かない

ローディングのアニメーションにおいて複数の要素を0.1秒ずつタイミングをずらして動かしたいという時に、下記のようにした所うまくズレず最初のいくつかがまとまって動き始めたりなど不安定な挙動が見られました。

※Safari 14.1.1にしてから再現しなくなったので修正された可能性があります。（2021/08/18追記）

※nth-of-type()内の数値指定の仕方が間違っていたので修正しました。

See the Pen
XWjVNQB by たろう (@bayashi)
on CodePen.

.icon:nth-of-type(1) {
  animation-delay: 0.1s;
}
.icon:nth-of-type(2) {
  animation-delay: 0.2s;
}
.icon:nth-of-type(3) {
  animation-delay: 0.3s;
}
.
.
.

対処法

弊社の環境では、負の値を設定することで正常に動くことが確認出来ました。

.icon:nth-of-type(1) {
  animation-delay: -0.3s;
}
.icon:nth-of-type(2) {
  animation-delay: -0.2s;
}
.icon:nth-of-type(3) {
  animation-delay: -0.1s;
}

この設定方法で解決しない場合は、CSSではなくJSでアニメーション発火タイミングを管理する方法も選択肢としてあります。（anime.jsなど）

5. Twitterの埋め込みタイムラインがはみ出る

Twitterのタイムラインを埋め込んだサイトをiPhoneで見ると親要素の幅を大幅に超えて表示されてしまう現象です。

See the Pen
dypJOgE by たろう (@bayashi)
on CodePen.

対処法

iOSにおいてiframeに対するwidth:100%が効かないのが原因で、iframeに対して親要素よりも大きい数値を!importantで設定することで解決します。pxやvw指定が使えるようです。

iframe {
  /* vwを利用する場合（100vwから左右の余白分を引く） */
  width: calc(100vw - 20px) !important;

  /* pxを利用する場合 */
  width: 1280px !important;
}

[外部リンク]Twitterのタイムライン埋め込みがiPhoneで閲覧時にはみ出る時の対応策:メモ

6. scrollbarのカスタムが出来ない

本来SafariはCSSにてスクロールバーのデザインを変更できるはずですが、iPhoneでは変更できません。(PC版Safariでは問題なくカスタム出来ます)

See the Pen
zYKpoYd by たろう (@bayashi)
on CodePen.

対処法

元々は問題なくカスタムを適用することが出来ましたが、iOS13から強制的に慣性スクロールが有効になったとのことで、実質CSSでのカスタムは出来なくなったようです。

そのため、SimpleBarなどのJSでカスタマイズを行うと良いでしょう。

7. iPadのSafariで背景指定している画像の周りの謎の白線が出る

再現性が低く検証をし切れていませんが、backgroundで画像背景を設定した時に要素の周りにうっすらと白線が見えることがありました。

Chromeでの同様の症状の古い報告が見つかりましたが弊社環境ではiPadでのみまれに再現されました。

background: url('../images/image.png') no-repeat top center / contain;

このような書き方をすると発生することがあるようで、「top center」の記述を「0 0」にすることで解決しました。

background: url('../images/image.png') no-repeat 0 0 / contain;

[外部リンク] Rogue white line appearing on background image

2. Chrome

知らない人はほぼ居ないであろう、全世界で最も使われているウェブブラウザ。Webサイトを作る時はまず、Chromeで見られるようにしなければならないでしょう。最大手だけあって目立つバグは少ないですが、無くはないです。

1. ページ読み込み時にtransitionが発火する

読み込み時にtransitionを設定している要素のアニメーションが発火してしまうバグで、いつになったら治るのかといつも思っていますが、未だ存在しています。

対処法

一番楽な方法ですと、CSSを読み込んでいるlinkタグの後にscriptタグを設置するという方法があります。scriptの内容は外部スクリプトでもなんでもよいらしく、空のjsファイルを読み込ませるなどでも発火が無効化されます。

この対処を行ってもどうしてもtransitionが動いてしまう場合は、あらかじめ全体のtransitionを無効化するスタイルを適用しておき、読み込み完了後にJSで無効化するなど無理やりですが回避可能です。

[外部リンク]Chrome の CSS transition がページロード時に動いてしまう問題の機序と対処

2. Buttonなどで青い枠が出る

バグではなく仕様ですが、デザイン上邪魔に感じる時があります。私がおすすめしているリセットCSSであるdestyle.cssでは無効化の記述があるのでわざわざ書く必要はありません。

対処法

*:focus {
  outline: none;
}

上記ですべてのアウトラインを無効化できます。

キーボードで操作したい時に困るのでやめたほうがいいです。

:focus-visible などを駆使するとよいです。

3. Firefox

Mozilla社による昔から有名なブラウザの一つです。ブラウザシェアで言えば日本ですとIE11と同等レベルなのですが、開発が続けられているブラウザですので対応は必要です。ただ、あまり目立ったバグには遭遇しないです。

1. テキストの上や下が詰まって表示されてしまう

これはバグではなくブラウザもしくはフォントの仕様によるものと思われますが、line-height:1;に設定していてもフォントによっては不自然に上や下に詰まって表示される事があります。

See the Pen
MWjryNG by たろう (@bayashi)
on CodePen.

こちらのデザインですと、Chrome/Safariではテキストが問題なくボックスの上下中央に配置されますが、Firefoxですと若干下寄りに表示されてしまいます。

対処法？

決定的な解決策はまだ得られておらず、このような場合はシェアの大きいブラウザ（Chrome/Safari）に最適化するか、必要であればCSSハックを利用してブラウザごとにpaddingなどで調整を行っています。

2. 画像が想定と違った色味で出力されてしまう

こちらも仕様なのですが、画像のカラープロファイル埋め込みの有無や表示ディスプレイの対応色域によってCSSによる色指定や画像の色味に差異が生じてしまうことがあります。

対処法

こちらも最適解が導き出せていないのですが、Firefoxの場合はデフォルト設定ではカラーマネジメントが行われずsRGBで書き出しているPNG画像とCSS色指定などとで発色の差異が発生しますので、カラープロファイルを設定しないで書き出すことで合わせることが出来ます。

ブラウザやOS側の設定で統一させることも出来るようですが、Webサイトを閲覧するユーザー全員にその操作を強制するわけにはいきませんので、まずは上記のような方法で様子を見るのがよいでしょう。

4. ブラウザ全般

1. アニメーションが重い、ちらつく

transitionやanimationがちらついたり、不自然な挙動をする事は色々なブラウザ（主にChrome/Safariですが）で頻繁に見受けられます。

対処法

will-change: プロパティ名;

/* その他方法 */
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

よく対策として取られるのはwill-changeプロパティを設定する方法ですが、むやみに使っても端末のリソースを消費しかえって重くなる事も有り得るため仕様を理解した上で利用する必要があります。

[外部リンク]CSS will-changeプロパティについて知っておくべきこと

あとがき

昨今様々なWebブラウザが登場しており、どこまで対応すればよいかというのは悩ましい課題ではあります。

私個人の意見としては、現在のブラウザシェア状況を鑑みて最低限Chrome/Safari/Firefoxの主要ブラウザがカバー出来ていれば問題ないと考えています。もちろん、訴求対象となるユーザー層によっても変わってきますので、イロコトでは案件内容に応じた対応を引き続き行っていきます。

それでは、良いお年を。