【追記】2022年3月にリリースされた Safari 15.4 で以下の問題は起きなくなりました。 CSS で色指定をするときに transparent というキーワードが使えますね。 その名のとおり「透明」の指定なんだけど、特定の環境では期待した結果になりません。 これがどう見えるか この四角い領域の表示は閲覧環境によって変わります。 ↓これの左右どっちか。 Mac の Safari では右半分のように黒く濁ったグラデーションになります。黒というか灰色というか。 また iOS, iPadOS だとすべてのブラウザーが右。 Safari だろうが Google Chrome だろうが Firefox だろうが Opera だろうが Microsoft Edge だろうが DuckDuck Go だろうが。 それ以外の環境だと左半分のようにクリアなグラデーションになっているはず。 要するに
![CSS の transparent が透明じゃない世界](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0a5d3bffb6c7751d876f7fd086d5e5b5df99684/height=288;version=1;width=512/https%3A%2F%2Fwww.msng.info%2Fwp-content%2Fuploads%2F2021%2F09%2Fb80d524e-transparent.jpg)