Safariでグラデーションのtransparentが黒っぽくなる問題を解決する
div要素の背景を赤から透明へのグラデーションにしたいと思って以下のように設定しても、Safariでは意図した表示にならない。
div.gradation_bg{ background: linear-gradient(#f00, transparent);}
こんな感じに透明部分が黒っぽくなる。
この記事の執筆時点でMac、iOS、iPadOSいずれも同じ表示。
これは、Safariがtransparentをrgba(0,0,0,0)、つまり「透明度の高い黒だ