Zenn
🐹

Safariのカスタムプロパティ相対パス解釈のバグ

2022/12/19に公開
CSS
#
バグ
SVG
Safari
#
カスタムプロパティ
tech

この記事は ドワンゴ Advent Calendar 2022 17日目の記事です。

ニコニコ生放送でフロントエンドエンジニアでビュー周りを担当している @misuken です。

Advent Calenderに空きがあったので、ニコニコ生放送の開発中に、Safariのカスタムプロパティのバグに遭遇した件を記事にまとめておこうと思います。

不具合の発覚

先日品証チームから、とある部分のアイコンが表示されていないという不具合が報告されました。

報告されたスクリーンショットを見るとたしかに表示されていなかったのですが、開発中は各ブラウザで確認していたこともあり、特に特殊なこともしていなかったのでなんだろう？と不思議に思いました。

不具合が発生していた環境が以下。

macOS Mojave：バージョン 10.14.6
Safari：バージョン14.1.2 (14611.3.10.1.7)

不具合の内容

色々調査した結果、Safariの14系まではカスタムプロパティに関する不具合があることがわかりました。

CSS background-image relative path var() on Safari not loading image - Stack Overflow

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

カスタムプロパティのurl()に相対パスを指定すると、問題のSafariのバージョンではCSSファイルからの相対パスではなく、CSSファイルを読み込んでいるドキュメントからの相対パスと解釈されてしまうとのこと。

不具合の回避策

この不具合の回避策は、Stack Overflowの中にも書いてあるものを含めて大きく3つありそうです。

インライン要素に書く

Stack Overflowの記事に書いてある方法。

var()を書く場所を外部CSSファイルではなくスタイル要素内に記述し、リソースもドキュメントからの相対位置に置く。

つまり、どのブラウザもドキュメントからの相対位置を参照するように変えてしまう方法。

当然、リソースをCDNには置けなくなるので理想的な手段ではありません。

リダイレクトする

Stack Overflowの記事に書いてある方法。

.htaccessなどでリダイレクトの指定を書く。

一度ドキュメントと同じサーバーにリクエストが飛んでくるので、それが問題にならないサービスなら最もシンプルな解決策かもしれません。(こういう特殊処理を書きたくないけど)

相対パスの使用をやめる

そもそもの話、相対パスを使用せずになんとかする方法。

  • 絶対パスで指定する
    • 開発環境と本番環境等でホストが変わる場合にはファイルごと何種類も生成する必要が出てくる
  • dataURLで埋め込む
    • CSSのファイル容量が増えてしまう

不具合の修正の情報

CSS var() causes relative URLs to break in Safari - django にこの不具合に関連する情報がまとまっています。

以前はChromeにも同様の問題があったようです。

また、以下のように修正されたバージョンも書いてありますが、今回不具合報告があったのは 14.1.2 (14611.3.10.1.7) なので、Safari15系なら大丈夫といった感じでしょうか。

This is fixed in the macOS 11.3 beta, with Safari Version 14.1 (16611.1.21.161.3).

まとめ

Safariの14系までは、カスタムプロパティのurlに相対パスを使用した場合、条件によっては正しく解釈されない不具合があります。

urlをカスタムプロパティで書くと簡潔な実装になって便利なこともありますが、サポートするブラウザのバージョンとの対応に十分注意しましょう。

おまけ

ニコニコ生放送では、SVGを5日目の記事Sass製SVG爆速表示ライブラリのご紹介で紹介したsmart-svgとreact-sass-inlinesvgを使用する形に置き換え始めています。(直近の2022年ニコニコ生放送WebフロントのView事情も公開したので気になる方はご覧ください)

smart-svgもカスタムプロパティと連携するとより便利に使えるよう設計されているのですが、Safariの不具合を回避するには相対パス以外の手段で連携する必要がある点にご注意ください。(カスタムプロパティで相対パスを使用しないなら全く問題ありません)

smart-svgは12日目の記事2022 ナンプレアプリ開発まとめで、hori_chanさんに早速使いやすさを体感いただいているので、みなさんもぜひスマートなSVG表示にご活用してみてはいかがでしょうか。

Discussion