はじめに

最近のブラウザは昔ほど理不尽な挙動に悩まされることも少なくなってきてはいますが、それでもやはりまだあります。バグが。

特にSafariは独自仕様が多く、他のChromeやFirefoxと異なる挙動をするものが多いため備忘録としてまとめてきたいと思います。※随時追記していきます。

※掲載時点のもので、すでに解消されているものもあるかもしれませんので掲載情報を鵜吞みにせず必ず実機で検証いただければと思います。

text-decorationを一括指定すると表示されなくなる

text-decoration: underline wavy;
のようにショートハンドで記述すると表示されず、
text-decoration-line: underline;
text-decoration-style: wavy;
と個別に指定する、もしくは
-webkit-text-decoration: underline wavy;
とプレフィックス付きで記述する必要がある。

iOS Safariで一部の要素の重なり順がz-indexの指定を無視する

• 1つのdiv内にposition:fixedの要素が二つ以上存在している場合、z-indexがおかしくなることがある
  →子要素内にfixedを複数持たせないようにする。
• 2D(z-index)のみで制御しようとすると表示順がおかしくなる
  →transform3Dを追加する。

display: grid; で1列のグリッドを作成するとき、子要素の幅が親要素に対して100%を計算できない

display: grid;
grid-auto-columns: 100%;
この問題はiOS 17のあるタイミングで修正されたようですが、サイトの制作条件によってはバグがある前提で親要素にwidthの指定を入れるなどの調整をしておく必要がある。

祖先含む3 つ以上 grid コンテナがネストした時に、大きな要素の描画に時間がかかる

Safari 17 -> 18 で改善された模様ですが、サイトの制作条件によってはバグがある前提でgridをネストしすぎないように心がけておく必要がある。

mask-compositeでintersectの挙動がおかしい

Safari 18.0ではintersect値がChromeやFirefoxと違う挙動をする。
mask-sizeでマスク画像を領域より小さくしたうえでmask-composite:intersectを使うと、うまく合成されなかったり画像外の部分を交差判定として捉えられたりして意図しない結果になることがあります。

一部をマスキングするときにはそのマスク領域のサイズの画像をmask-positionで配置するのではなく、余白も含めたmask-size調整の不要なマスク画像を用意することで回避できます。

svgをscaleで拡大したら粗くなる

Safariではscale以外にもグラデーションやドロップシャドウなどを使用した場合でも同様にベクターデータではなくビットマップ画像として描画され、その影響で粗くなるようです。
拡大縮小はwidthやheight指定で回避しましょう。