CSS filterの効果は実行環境（ブラウザ）によって違うから気をつけろ

こんなことは常識なのかもしれないが、私はハマった。

再現経緯

画像が出現するという演出を実装した。
人物が、まず白いシルエットで現れて、それが色変化して最終的に人物として出現するというものだ。
人物画像とは別にシルエット画像を用意して読み込ませるのは冗長なので、
以下のように、filterとtransitionで実装した。

img {
  transition: opacity 500ms linear, filter 300ms linear 500ms;
  &[aria-hidden="true"] {
    // 出現前
    filter: brightness(100);
    opacity: 0;
  }
}

まずopacity: 0で透明化していた画像が出現するが、そのときfilter: brightness(100)で白く飛ばした状態で出てくる。
その後、時間差でfilterが外れた状態（つまり本来の画像）へ移行する。

MacOS Chromeで見る限り問題なかったのだが、モバイル端末実機での検証で「色がおかしい」という指摘が入った。

各ブラウザでのfilter: brightnessを検証

もしかして、閲覧環境によって見え方が違うのではないかと思い、Safariで確認したところ、見え方が違うことが判明した。
以下は、Chrome, Firefox, Safariでfilter: brightnessの見え方を検証したものだ。（Edgeは知らん）
※画像はいらすとやさん。

brightness(2)程度なら、さほど違いはないが、
brightness(10)になると、全然違う。
FirefoxとSafariは、かなり近い効き方をしている。Chromeと違って、白飛びすることがあまりない。

ついでに、他のfilterも検証

brightness以外のfilterプロパティも検証してみた。
（キャプションつけ忘れたけど、先ほどと同じく左から Chrome, Firefox, Safari）

contrastやsaturateでは若干の違いを確認できたが、
brightnessほど顕著なものはなかった。

結論

CSSのfilterは、実行環境で違いが生じうる。
特に、filter:brightnessで白いシルエットにしようとするのはやめるべき。